闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题
2024-09-10 03:27:48
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-
图标闪动：
@keyframes twinkling{/*透明度由0到1*/
0%{
opacity:;
color:#ef0000;
}
100%{
opacity:;
color:#ef0000;
}
}
@-moz-keyframes twinkling{/*火狐浏览器*/
0%{
opacity:;
color:#ef0000;
}
100%{
opacity:;
color:#ef0000;
}
}
@-webkit-keyframes twinkling{ /*Safari 和 Chrome*/
0%{
opacity:;
color:#ef0000;
}
100%{
opacity:;
color:#ef0000;
}
}
@-o-keyframes twinkling{
0%{
opacity:;
color:#ef0000;
}
100%{
opacity:;
color:#ef0000;
}
}
未完待续
$(".icon-bell").css({"animation":"twinkling 1s infinite ease-in-out"});
setInterval(function(){ $(".c-icon-bell").fadeOut(500).fadeIn(500); },200);
最新文章
- 记录git多人协作开发常用的流程，供新手参考
- 无法从命令行或调试器启动服务，必须首先安装Windows服务(使用installutil.exe),然后用ServerExplorer、Windows服务器管理工具或NET START命令启动它
- 支持IE6的树形节结构TreeTable实际应用案例
- 一个fibonacci数列简单求和的问题
- STL之优先队列
- JSP - request - 1
- Unit of work + Repository
- 浅析文本挖掘（jieba模块的应用）
- Servlet生命周期和注解配置
- Lua 函数链功能
- Codeforces 653F Paper task SA
- win10下VM 中centos 安装共享文件
- Python爬虫：如何爬取分页数据？
- xml生成javabean(zhuan)
- .Net WebApi部署问题
- mybatis update数据时无异常但没更新成功；update异常时如数据超出大小限制，造成死锁
- 实践作业4---DAY2阶段一。
- 阿里云服务器centos6.x升级内核以能安装docker
- Flask 入门（第三篇）
- 利用例子来理解spring的面向切面编程(使用@Aspect)