基于CSS3特效之动画:animation的应用


Posted in HTML / CSS onMay 09, 2013

animation

渐变背景动画

复制代码
代码如下:

@-webkit-keyframes changeBg{
0%{background-color:#000;}
20%{background-color:#300;}
40%{background-color:#600;}
60%{background-color:#900;}
80%{background-color:#f00;}
}
@-moz-keyframes changeBg{
0%{background-color:#000;}
20%{background-color:#300;}
40%{background-color:#600;}
60%{background-color:#900;}
80%{background-color:#f00;}
}
@keyframes changeBg{
0%{background-color:#000;}
20%{background-color:#300;}
40%{background-color:#600;}
60%{background-color:#900;}
80%{background-color:#f00;}
}
.animation-1{ width:200px; height:30px; line-height:30px; text-align:center; background-color:#000; color:#fff; }
.animation-1:hover{ -webkit-animation:changeBg 2s linear; -moz-animation:changeBg 2s linear; animation:changeBg 2s linear; background-color:#f00; }

文字移动动画

复制代码
代码如下:

@-webkit-keyframes textMove{
0%{ padding-left:0px;}
20%{ padding-left:50px;}
40%{ padding-left:100px;}
50%{ padding-left:125px;}
60%{ padding-left:100px;}
80%{ padding-left:50px;}
}
@-moz-keyframes textMove{
0%{ padding-left:0px;}
20%{ padding-left:50px;}
40%{ padding-left:100px;}
50%{ padding-left:125px;}
60%{ padding-left:100px;}
80%{ padding-left:50px;}
}
@keyframes textMove{
0%{ padding-left:0px;}
20%{ padding-left:50px;}
40%{ padding-left:100px;}
50%{ padding-left:125px;}
60%{ padding-left:100px;}
80%{ padding-left:50px;}
}
.animation-2{ background-color:pink; padding:10px 0;}
.animation-2:hover{ -webkit-animation:textMove 2s linear; -moz-animation:textMove 2s linear; animation:textMove 2s linear;}

简单的复合动画

复制代码
代码如下:

/*由于代码较多,此处只附上加-webkit前缀*/
.animation-3{ position:relative; width:200px; height:100px; padding:10px; background-color:#ccc;}
.animation-3 p{ opacity:0;}
.txt-1{
margin-left:60px;
-webkit-animation:txt-1-move 2s ease-out;
-moz-animation:txt-1-move 2s ease-out;
animation:txt-1-move 2s ease-out;
}
@-webkit-keyframes txt-1-move{
0%{margin-left:0px;opacity:0;}
50%{margin-left:30px;opacity:1; -webkit-transform:skew(-15deg);}
70%{margin-left:35px;opacity:1;}
100%{margin-left:60px;opacity:0; -webkit-transform:skew(-30deg);}
}</p> <p>.txt-2{
opacity:1;
height:36px;
margin-top:10px;
font:18px/36px "Microsoft Yahei";
-webkit-animation:txt-2-move 4s ease-out 4s;
-moz-animation:txt-2-move 4s ease-out 4s;
animation:txt-2-move 4s ease-out 4s;
}
@-webkit-keyframes txt-2-move{
0%{margin-left:0px; opacity:0;}
30%{margin-left:50px; opacity:1;}
35%{margin-left:55px; opacity:1;}
40%{margin-left:55px; opacity:1;}
41%{margin-left:55px; opacity:1; -webkit-transform:skew(-30deg)}
45%{margin-left:55px; opacity:1;}
50%{margin-left:50px; opacity:1;}
60%{margin-left:50px; opacity:.5;}
70%{margin-left:50px; opacity:1;}
80%{margin-left:50px; opacity:.5;}
90%{margin-left:50px; opacity:1;}
100%{margin-left:50px; opacity:1;}
}</p> <p>.txt-3{
position:absolute;
bottom:10px;
right:0px;
margin-left:-60px;
-webkit-animation:txt-3-move 2s ease-out 2s;
-moz-animation:txt-3-move 2s ease-out 2s;
animation:txt-3-move 2s ease-out 2s;
}
@-webkit-keyframes txt-3-move{
0%{margin-right:0px; opacity:0;}
50%{margin-right:30px; opacity:1; -webkit-transform:skew(-15deg);}
70%{margin-right:35px; opacity:1;}
100%{margin-right:60px; opacity:0; -webkit-transform:skew(-30deg);}
}
HTML / CSS 相关文章推荐
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 #HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 #HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 #HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 #HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 #HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 #HTML / CSS
You might like
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python AES加密实例解析
2018/01/18 Python
基于python实现学生管理系统
2018/10/17 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python创建自己的加密货币的示例
2021/03/01 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
外国人聘用意向书
2014/04/01 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
商务宴会祝酒词
2015/08/11 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python