基于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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
PHP的中问验证码
2006/11/25 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php简单smarty入门程序实例
2015/06/11 PHP
form自动提交实例讲解
2017/07/10 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python函数式编程
2017/07/20 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
详解python中的模块及包导入
2019/08/30 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
应用服务器有那些
2012/01/19 面试题
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
单位同意报考证明
2015/06/17 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers