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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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
PDO::errorInfo讲解
2019/01/28 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
vue一步步实现alert功能
2017/07/05 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python如何变换环境
2020/07/21 Python
Python自动登录QQ的实现示例
2020/08/28 Python
python openpyxl模块的使用详解
2021/02/25 Python
应届生煤化工求职信
2013/10/21 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
《中华少年》教学反思
2014/02/15 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
工作年限证明模板
2014/11/01 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书