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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 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
php正则校验用户名介绍
2008/07/19 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php实现评论回复删除功能
2017/05/23 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
在Python中使用模块的教程
2015/04/27 Python
Python封装shell命令实例分析
2015/05/05 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python向图片里添加文字
2019/11/26 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
户外活动总结范文
2014/04/30 职场文书
舞蹈专业求职信
2014/06/13 职场文书
布达拉宫导游词
2015/02/02 职场文书
行为习惯主题班会
2015/08/14 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
浅谈Redis的几个过期策略
2021/05/27 Redis