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

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

CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
2019独角兽企业重金招聘Python工程师标准>>> CSS+DIV固定底部的漂浮导航条(多浏览器兼容) 博客分类: div css 在项目中.为了解决多浏览器兼容的问题..ie6 ...
如何优雅地实现浏览器兼容与CSS规则回退
读完了<Visual Studio Code权威指南>,前端方面书籍不能停,于是捡起「CSS一姐」 Lea Verou 的<CSS魔法>. 我们没法控制用户使用新版本还是老版本 ...
HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
php字体闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
使用css animation动画做边框闪动效果
使用css animation动画做边框闪动效果在拖拽div节点时,给div节点添加diagramTop-item-click样式,使用css animation动画0.5秒执行一次. css样式 ...
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
问题描述我们知道浏览器页面上的文字正常情况下我们是可以双击选中.或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的.但是有的时候,这种效果我们并不想要的,比如用户点快了的时候, ...
手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: 脚本之家 dl{width:150px;} dl,dd{margin:0;} dt{ backgro ...
JQuery中的CSS属性及操作
目录 1.JQuery中的css()方法 1) 返回 CSS 属性 2) 设置 CSS 属性 3) 设置多个 CSS 属性 2.JQuery的CSS操作 3.JQuery的class操作 1.JQue ...

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

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

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

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

最新文章

热门文章

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

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

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

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

最新文章

热门文章

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