基于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 21 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 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+dbfile开发小型留言本
2006/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
Javascript实现字数统计
2015/07/03 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
python实现保存网页到本地示例
2014/03/16 Python
Python迭代用法实例教程
2014/09/08 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python实现决策树分类
2018/08/30 Python
python字典的遍历3种方法详解
2019/08/10 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
餐饮业的创业计划书范文
2013/12/26 职场文书
法定代表人资格证明书
2014/09/11 职场文书
营销经理工作检讨书
2014/11/03 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android