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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
使用CSS实现音波加载效果
May 07 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
js身份证判断方法支持15位和18位
2014/03/18 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
express 项目分层实践详解
2018/12/10 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python中列表的含义及用法
2020/05/26 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书