html - 如何使用 CSS 3 制作闪烁/闪烁的文本

Question

目前，我有这个代码：

@-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;
}

它闪烁，但它只在“一个方向”闪烁。我的意思是，它只会淡出，然后用重新出现opacity: 1.0，然后再次淡出，再次出现，依此类推......

我希望它淡出，然后从这个淡出再次“提升”到opacity: 1.0. 那可能吗？

score 860 · Accepted Answer

你是第一个设置opacity: 1;，然后你结束它0，所以它从开始0%并结束100%，所以只需将不透明度设置为0at 50%，其余的将自行处理。

演示

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

在这里，我将动画持续时间设置为1 second，然后将其设置timing为linear。这意味着它将始终保持不变。最后，我正在使用infinite. 这意味着它将继续下去。

注意：如果这对您不起作用，请根据和的要求使用浏览器前缀，如-webkit,-moz等等。你可以参考我这里的详细代码animation@keyframes

如评论所述，这不适用于旧版本的 Internet Explorer，为此您需要使用 jQuery 或 JavaScript ...

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

^{感谢 Alnitak 提出更好的方法。}

演示 （使用 jQuery 的 Blinker）

score 85 · Accepted Answer

获得纯粹的“100% on, 100% off”眨眼的最佳方式，就像旧<blink>的一样：

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

score 77 · Accepted Answer

使用alternate值animation-direction（并且您不需要以这种方式添加任何 keframe）。

alternate

动画应该在每个循环中反转方向。反向播放时，动画步骤向后执行。此外，计时功能也颠倒过来；例如，当反向播放时，缓入动画被缓出动画替换。确定它是偶数还是奇数迭代的计数从一开始。

CSS：

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

我已经删除了from关键帧。如果它丢失，它会从您为opacity元素上的动画属性（在这种情况下）设置的值生成，或者如果您没有设置它（并且在这种情况下您没有），则从默认值生成（这是1为opacity）。

请不要只使用 WebKit 版本。在它之后添加一个无前缀的。如果您只想编写更少的代码，请使用简写.

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }

<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

score 17 · Accepted Answer

或者，如果您不希望显示和隐藏之间的逐渐过渡（例如闪烁的文本光标），您可以使用以下内容：

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

每一个1s .cursor都会从visible到hidden。

如果不支持 CSS 动画（例如在某些版本的 Safari 中），您可以回退到这个简单的 JS 间隔：

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

这个简单的 JavaScript 实际上非常快，在许多情况下甚至可能是比 CSS 更好的默认值。值得注意的是，许多 DOM 调用使 JS 动画变慢（例如 JQuery 的 $.animate()）。

它还有第二个优点，如果您.cursor稍后添加元素，它们仍将与其他 s 完全相同，.cursor因为状态是共享的，据我所知，这在 CSS 中是不可能的。

score 14 · Accepted Answer

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

score 14 · Accepted Answer

我不知道为什么，但只为visibility属性设置动画在任何浏览器上都不起作用。

您可以做的是以opacity浏览器没有足够的帧来淡入或淡出文本的方式为属性设置动画。

例子：

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

score 9 · Accepted Answer

更改持续时间和不透明度以适应。

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

score 9 · Accepted Answer

如果你想要流畅的动画，试试这个。

    .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>

score 6 · Accepted Answer

我的解决方案：

.blink {
 animation: blinkMe 2s linear infinite;
}
@keyframes blinkMe {
 0% {
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}

<p class="blink">Blink</p>

我使用 blinkMe 作为动画名称，2s 作为持续时间，线性作为时间，无限，以便它永远重复。

我们需要为旧版浏览器使用 JavaScript 和 jQuery，因为它们不支持动画和/或 @keyframes：

$(document).ready(function() {
 window.setInterval(function() {
  $(".blink").fadeIn(1000).fadeOut(1000);
 }, 2000)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="blink">Blink</p>

如果你想制作一个眨眼效果，就像眨眼标签一样，这将起作用：

.blink {
 animation: blink 0.5s step-start infinite;
}
@keyframes blink {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

<p class="blink">Blink</p>

如果要调整速度，请更改持续时间。

score 4 · Accepted Answer

迟到了，但想添加一个带有更多关键帧的新...这是CodePen 上的一个示例，因为内置代码片段存在问题：

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

score 2 · Accepted Answer

.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");

score 1 · Accepted Answer

<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>

score 1 · Accepted Answer

通过对各个元素使用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);

html - 如何使用 CSS 3 制作闪烁/闪烁的文本

13 回答 13

alternate

Related

Reference

`alternate`