如何使用CSS 3制作闪烁/闪烁文本？

问题描述

目前，我有这样的代码：

  @  -  webkit-keyframes blinker {
 from {opacity：1.0 ; } 
到{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％，所以只需在 50％设置不透明度为 0 ，其余部分将会小心本身。

  .blink_me {animation：blinker 1s linear infinite;} @keyframes blinker {50％{opacity：0; }  

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

1秒，比设置时间为线性这意味着它将始终保持不变，并且最后一次使用无限这意味着它将继续运行。

---

As commented, this won't work on older versions of Internet Explorer, for that, you need to use jQuery or JavaScript....

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

Demo (Blinker using jQuery)

这篇关于如何使用CSS 3制作闪烁/闪烁文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！