css--动画
2016-01-17 10:19
656 查看
一般我们都认为html+css只能创建静态页面,其实css3中已经可以创建动态页面。
这一章我们就来讲述一下如何通过css创建动画。
css中创建动画是通过@keyframes准则来标定的
规定动画的时长,规定动画的名称
首先我们还是通过程序来看一下。
css
还有我们在设置动画属性时,至少要给出动画名称,动画时长。动画具体还有那些属性,请参考
w3c标准
这一章我们就来讲述一下如何通过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; }
相关文章推荐
- 浅谈CSS外边距重叠
- CSS3动画
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- 读书笔记 CSS权威指南 1~4章
- CSS Display(显示) and Visibility(可见性)
- CSS Positioning(定位)
- CSS Float(浮动)
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类(Pseudo-classes)
- 最大公共子序列求和问题(MCSS)
- FizzlerEx —— 另一个HtmlAgilityPack的CSS选择器扩展,
- CSS学习02
- 子元素浮动父容器高度不能自适应的CSS解决方法
- css样式
- CSS 中Font Awesome 图标(附码表)
- CSS制作三角标签
- 【CSS+DIV】CSS总结
- CSS - ResetCss
- CSS学习01