CSS3 简写animation


Posted in HTML / CSS onMay 10, 2012

复制代码
代码如下:

@-webkit-keyframes 'buttonLight' {
%,50%,100% { opacity:1;}
%,75%{ opacity:0;}
}
a.flash{
-webkit-animation-name: "buttonLight"; /*动画名称,需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: 5s;/*动画持续的时间长*/
}
a#btn {
/*按钮的基本属性*/
background: #60cb1b;
font-size: 16px;
padding: 10px 15px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
}
复制代码
代码如下:

<a href="" id="btn" class="flash">button</a>

关键贞的动画效果如果一样,可以将关键贞的百分比用逗号隔开,然后再写效果
0%,50%,100% { opacity:1;} 表示在0,50 100 这三个点的关键贞,透明度都为125%,75%{ opacity:0;} 表示在25,75 这两个点的关键贞,透明度都为0动画效果与基本样式最好分开写,便维护!
HTML / CSS 相关文章推荐
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 #HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 #HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 #HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 #HTML / CSS
时尚的CSS3进度条效果
Feb 22 #HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 #HTML / CSS
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
可插入图片的TEXT文本框
2013/12/27 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
js图片上传的封装代码
2017/08/01 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
python中类的一些方法分析
2014/09/25 Python
介绍Python中内置的itertools模块
2015/04/29 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
详细分析Python collections工具库
2020/07/16 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
关于毕业的广播稿
2014/01/10 职场文书
运动会入场词60字
2014/02/15 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书