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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
POST提交数据常见的四种方式
Jan 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
基于mysql的bbs设计(三)
2006/10/09 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
javascript 获取图片颜色
2009/04/05 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
layui分页效果实现代码
2017/05/19 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
Python科学计算之Pandas详解
2017/01/15 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python命令行参数用法实例分析
2019/06/25 Python
详解python中index()、find()方法
2019/08/29 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python实现logistic分类算法代码
2020/02/28 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
Python try except else使用详解
2021/01/12 Python
iostream与iostream.h的区别
2015/01/16 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
医药营销专业个人自荐信
2013/09/29 职场文书
二年级学生评语大全
2014/04/23 职场文书
公司晚会策划方案
2014/05/17 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
销售会议开幕词
2015/01/28 职场文书