8

我想用两种不同的颜色闪烁文本:

例如:闪烁文本 white-green-white-green-white-green

我不介意 jQuery 或 CSS。

4

2 回答 2

19

反对我更好的判断大声笑......你需要调整与 webkit 的跨浏览器兼容性等

已编辑以适用于所有浏览器

 <a href="#"> text</a>


 /* css */

 a {
   animation-duration: 400ms;
   animation-name: blink;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}
@keyframes blink {
   from {
      opacity: 1;
   }
   to {
      opacity: 0;
   }
 }

演示

于 2014-03-18T20:35:12.810 回答
3

http://jsfiddle.net/8Xhzt/12/

不支持 IE 9:animation-iteration-count
注意要支持不支持的当前浏览器,您可以使用 Modernizr:请参阅如何跨浏览器规范 CSS3 转换函数? CSS3 动画填充模式 polyfill

@-webkit-keyframes blink {
   from { color: green; }
   to { color: white; }
  }
 @-moz-keyframes blink {
   from { color: green; }
   to { color: white; }
 }
 @-ms-keyframes blink {
   from { color: green; }
   to { color: white; }
 }
 @-o-keyframes blink {
   from { color: green; }
   to { color: white; }
 }
 @keyframes blink {
   from { color: green; }
   to { color: white; }
 }

 .blink {
    color: green;
    -webkit-animation: blink 2s 3 alternate;
    -moz-animation: blink 2s 3 alternate;  
    -ms-animation: blink 2s 3 alternate;  
    -o-animation: blink 2s 3 alternate;  
    animation: blink 2s 3 alternate;   
 }
于 2014-03-18T20:37:38.633 回答