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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
详解javascript高级定时器
2015/12/31 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
家长对孩子的评语
2014/04/18 职场文书
模特大赛策划方案
2014/05/28 职场文书
团代会闭幕词
2015/01/28 职场文书
团员年度个人总结
2015/02/26 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers