如何在css2中为chrome浏览器添加文本闪烁效果

我设置了这个css属性text-decoration:在我的css代码中闪烁.不幸的是它只适用于Firefox.必须有一种方法显示克罗姆的闪烁效果.你们必须有答案..

解决方法

答案就在这里http://www.john-smith.me/emulating–lt-blink-gt–using-webkit-css3-animation.在这个例子中,.blink类会让事情眨眼……你必须写两次因为Chrome需要-webkit-当Firefox或Opera没有时.

<style>
/**
 * Emulating <blink> using WebKit CSS3 animation        
 *   This code is part of John Smith's blog
 *
 * copyright 2010 by John Smith,All Rights Reserved
 *
 * @link   http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation
 * @date   18th October 2010 at 11:01 p.m.
 * @author John Smith
 */
@-webkit-keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }
        @keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }

.blink {
   text-decoration:blink;

  -webkit-animation-name:blinker;
          animation-name:blinker;  
  -webkit-animation-iteration-count:infinite;  
          animation-iteration-count:infinite;  
  -webkit-animation-timing-function:cubic-bezier(1.0,1.0);
          animation-timing-function:cubic-bezier(1.0,1.0);
  -webkit-animation-duration:1s; 
          animation-duration:1s; 
}
</style>

您可以保留(或不保留)旧浏览器的旧blink属性(如您所愿).

我更喜欢只使用-webkit-(一次)而且我保留文本装饰,因为Opera和Firefox都知道它. (对于其他动画,没有选择.只是为了眨眼他们已经知道该怎么做了).

但这只是因为我不喜欢写两次而且我很懒.这不是建议.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效