CSS3实现闪烁动画效果的方法


Posted in HTML / CSS onFebruary 09, 2015

本文实例讲述了CSS3实现闪烁动画效果的方法。分享给大家供大家参考。具体方法如下:

给class属性名为className的元素添加闪烁动画效果

复制代码
代码如下:
.className{
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}

希望本文所述对大家基于css的网页设计有所帮助。

HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 #HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 #HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 #HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 #HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 #HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 #HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 #HTML / CSS
You might like
类的另类用法--数据的封装
2006/10/09 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
Javascript 入门基础学习
2010/03/10 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python列表生成式与生成器操作示例
2018/08/01 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
如何用python处理excel表格
2020/06/09 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
银行批评与自我批评
2014/02/10 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers