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%{ 3opacity:0; 4color:#ef0000; 5 } 6 100%{ 7 opacity:1; 8 color:#ef0000; 9 }10 }11 @-moz-keyframes twinkling{/*火狐浏览器*/12 0%{13opacity:0;14color:#ef0000;15 }16 100%{17opacity:1;18color:#ef0000;19 }20 21 }22 23 @-webkit-keyframes twinkling{ /*Safari 和 Chrome*/24 0%{25opacity:0;26color:#ef0000;27 }28 100%{29opacity:1;30color:#ef0000;31 }32 33 }34 @-o-keyframes twinkling{35 0%{36opacity:0;37color:#ef0000;38 }39 100%{40opacity:1;41color:#ef0000;42 }43 }
未完待续
$(".icon-bell").css({"animation":"twinkling 1s infinite ease-in-out"});
setInterval(function(){$(".c-icon-bell").fadeOut(500).fadeIn(500); },200);