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实现手风琴风格菜单具体步骤
May 06 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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
ftp类(example.php)
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php email邮箱正则
2008/10/08 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jquery 使用简明教程
2014/03/05 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
自我鉴定注意事项
2014/01/19 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
详解Redis瘦身指南
2021/05/26 Redis
详细分析PHP7与PHP5区别
2021/06/26 PHP
Mysql binlog日志文件过大的解决
2021/10/05 MySQL