闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题...

opacity 是CSS3中：设置元素的不透明度的属性（支持ie8以上）

opacity: value|inherit;
value用于规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

 

 @keyframes是CSS3 规则:实现过渡动画的方式 （支持ie10以上）

 在动画过程中，通过更改css样式，实现从一个CSS样式设定到另一个

设定从变化从0%~100%

0％是开头动画，100％是当动画完成。（也有用 from  to关键字的）

animation属性来控制动画的外观，还使用选择器绑定动画。（声明动画名称）

keyframes-selector:用来划分动画的时长，可以使用百分比0%~100%形式，也可以使用 "from" 和 "to"的形式。

语法结构：

@keyframes animationname{keyframes-selector {css-styles;}}

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Firefox需要前缀-moz-

Opera需要前缀-o-

图标闪动：

 1 @keyframes twinkling{/*透明度由0到1*/
 2   0%{
 3     opacity:0;
 4     color:#ef0000;
 5   }
 6   100%{
 7   opacity:1;
 8   color:#ef0000;
 9   }
10 }
11 @-moz-keyframes twinkling{/*火狐浏览器*/
12   0%{
13     opacity:0;
14     color:#ef0000;
15   }
16   100%{
17     opacity:1;
18     color:#ef0000;
19   }
20 
21 }
22 
23 @-webkit-keyframes twinkling{    /*Safari 和 Chrome*/
24   0%{
25     opacity:0;
26     color:#ef0000;
27   }
28   100%{
29     opacity:1;
30     color:#ef0000;
31   }
32 
33 }
34 @-o-keyframes twinkling{
35   0%{
36     opacity:0;
37     color:#ef0000;
38   }
39   100%{
40     opacity:1;
41     color:#ef0000;
42   }
43 }

 未完待续

$(".icon-bell").css({"animation":"twinkling 1s infinite ease-in-out"});

setInterval(function(){ $(".c-icon-bell").fadeOut(500).fadeIn(500); },200); 

 

转载于:https://www.cnblogs.com/niehanyu/p/10621993.html