如何使闪烁/闪烁的文本与css3

目前，我有这样的代码:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

它会眨，但只会“朝一个方向”眨。我的意思是，它只是淡出，然后它以不透明度:1.0再次出现，然后再次淡出，再次出现，如此循环……

我想让它淡出，然后从这个淡出再次“提升”到不透明度:1.0。这可能吗?

当前回答

你首先设置不透明度:1;然后在0处结束，所以它从0%开始，到100%结束，所以把不透明度设置为0，也就是50%剩下的会自动完成。

Demo

.blink_me { 动画:眨眼1s线性无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝｝ <div class="blink_me">BLINK ME</div>

在这里，我将动画持续时间设置为1秒，然后将计时设置为线性。这意味着它始终是不变的。最后，我用的是无限。这意味着它会一直持续下去。

注意:如果这对您不起作用，请使用浏览器前缀，如 -webkit， -moz等根据需要进行动画和 @keyframes。您可以在这里参考我的详细代码

如上所述，这在旧版本的ie浏览器上行不通，为此你需要使用jQuery或JavaScript…

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

感谢Alnitak提出了一个更好的方法。

演示(Blinker使用jQuery)

2013-05-02 17:41:11

其他回答

如果你想要平滑的动画，试试这个。

    .blink {
        animation: blinker 1s infinite;
    }
      
    @keyframes blinker {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }

    <span class="blink">I am blinking</span>

2021-06-17 04:59:19

.neon {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px yellow;
  animation: blinker 6s;
  animation-iteration-count: 1;
}
@keyframes blinker {
  0% {
    opacity: 0.2;
  }
  19% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  23% {
    opacity: 0.2;
  }
  36% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

我使用font-family: "Quicksand"， sans-serif;

这是对字体的导入(放到style。css的顶部)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

2021-01-23 12:57:24

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

2018-04-11 12:40:51

我使用class=blink对各自的元素进行处理

简单JS代码

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);

2019-09-12 03:52:53