css--动画
2016-01-17 10:19
537 查看
原文链接:https://www.geek-share.com/detail/2663997140.html
一般我们都认为html+css只能创建静态页面,其实css3中已经可以创建动态页面。
这一章我们就来讲述一下如何通过css创建动画。
css中创建动画是通过@keyframes准则来标定的
规定动画的时长,规定动画的名称
首先我们还是通过程序来看一下。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动画效果</title> <link rel="stylesheet" type="text/css" href="donghua.css"> </head> <body> <div> 旋转起来吧! </div> </body> </html>
css
div{ width:200px; height:200px; background-color: brown; position:relative; animation:anima 5s infinite alternate;//这一步就是为这个div设置动画属性,这个动画的名称是anima ,动画时长5s,执行次数是infinite(无数次),执行方式(循环) -webkit-animation: anima 5s infinite alternate;//这一步是为了让在chrome浏览器能够执行(兼容浏览器,如果你想让在其他浏览器支持,还要兼容其他浏览器。方式一样。
例如 -moz-animation:...啥的。) }
下面就是通过@keyframes来规定动画具体操作。 @keyframes anima { 0% { background-color: red; width: 200px; height: 200px; left: 0px;//如果设置了移动属性,那么div一定要设置成定位的。 top: 0px; } 25% { background-color: royalblue; width: 100px; height: 100px; left: 400px; top: 0px; } 50% { background-color: burlywood; width: 50px; height: 50px; left: 400px; top: 400px; } 75% { background-color: green; width: 100px; height: 100px; left: 0px; top: 400px; } 100% { background-color: red; width: 200px; height: 200px; left: 0px; top: 0px; } } @-webkit-keyframes anima { 0%{background-color: red;width:200px;height:200px;left:0px;top:0px; } 25%{background-color: royalblue;width:100px;height:100px;left:400px;top:0px; } 50%{background-color: burlywood;width:50px;height:50px;left:400px;top:400px; } 75%{background-color: green;width:100px;height:100px;left:0px;top:400px; } 100%{background-color: red;width:200px;height:200px;left:0px;top:0px; }
还有我们在设置动画属性时,至少要给出动画名称,动画时长。动画具体还有那些属性,请参考
w3c标准
div{
width:200px;
height:200px;
background-color: brown;
position:relative;
animation:anima 5s infinite alternate;
-webkit-animation: anima 5s infinite alternate;
}
@keyframes anima {
0% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
25% {
background-color: royalblue;
width: 100px;
height: 100px;
left: 400px;
top: 0px;
}
50% {
background-color: burlywood;
width: 50px;
height: 50px;
left: 400px;
top: 400px;
}
75% {
background-color: green;
width: 100px;
height: 100px;
left: 0px;
top: 400px;
}
100% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes anima {
0%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}
25%{background-color: royalblue;width:100px;height:100px;left:400px;top:0px;
}
50%{background-color: burlywood;width:50px;height:50px;left:400px;top:400px;
}
75%{background-color: green;width:100px;height:100px;left:0px;top:400px;
}
100%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}
转载于:https://www.cnblogs.com/yuaima/p/5136850.html
相关文章推荐
- css动画
- 120行纯css代码制作沙漏小动画
- css annimate动画
- css3360度旋转动画
- 20行简单css代码实现炫酷的多选图动画(附代码)
- css动画效果简单zol
- 14(高级)CSS动画之:旋转星球
- jquery重新播放css动画所遇问题解决
- 纯CSS打造的安卓系统开机画面动画特效代
- css动画集合地址
- 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子
- 一个不错的动画样式CSS
- CSS动画属性1
- Animo.js :一款管理 CSS 动画的强大的小工具
- css动画animation,transition,transform
- 纯 CSS 方式实现 CSS 动画的暂停与播放
- CSS动画效果——transition之渐变方块
- CSS 动画之十-图片+图片信息展示
- 超级简单CSS项目,悬停过渡动画三部曲
- 强大的CSS:模拟下雪效果动画制作教程