4

text-decoration:blink我在我的 css 代码中设置了这个 css 属性。不幸的是，它只适用于 Firefox。一定有办法在 Crome 中显示闪烁效果。各位一定有答案吧。。

4

3 回答 3

10

答案就在这里：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,0,0,1.0);
          animation-timing-function:cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration:1s; 
          animation-duration:1s; 
}
</style>

您可以保留（或不保留）旧浏览器的旧闪烁属性（如您所愿）。

我更喜欢只使用-webkit-（一次）并且我保留了文本装饰，因为 Opera 和 Firefox 知道它。（对于其他动画，别无选择。只是眨眼他们已经知道该怎么做了）。

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

于 2013-07-07T02:52:09.540 回答
3

不幸的是，Chrome 不支持该属性的 CSS 闪烁值。您需要使用 jQuery 来创建相同的效果。类似http://archive.plugins.jquery.com/project/blink

于 2012-07-08T16:10:44.263 回答
2

你永远不需要jQuery来实现 javascript 效果。jQuery 是一个完整的 JavaScript 库，这意味着可以在几行代码中完成，而无需加载整个库。现在，如果您已经在使用 jQuery，那么它就容易多了。

于 2013-10-28T15:34:28.820 回答