Heim >Web-Frontend >HTML-Tutorial >CSS3简单动画_html/css_WEB-ITnose
CSS3简单动画_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:001238Durchsuche
css3的动画确实非常绚丽！浏览器兼容性很重要！。
分享两个小动画
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>C3动画</title> <style> /*****************/ #d1{width:50px;height:50px;background-color:green;float:left; border-radius:50%;} #d2{width:50px;height:50px;background-color:red;float:left; border-radius:50%;position:relative;} @-webkit-keyframes jump{ 0%{transform:rotate(0deg);opacity:1;} 25%{transform:rotate(-10deg);opacity:0.5;} 50%{transform:rotate(0deg);opacity:1;} 75%{transform:rotate(10deg);opacity:0.5;} 100%{transform:rotate(0deg);opacity:1;} } #d1{-webkit-animation:jump 0.3s linear infinite;} @-webkit-keyframes move{ 0%{left:10px;background-color:blue;} 50%{left:800px;background-color:yellow;} 100%{left:10px;background-color:red;} } #d2{-webkit-animation:move 5s linear infinite;} </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body></html> 效果如本博客首页那两个小圆圈！
需要注意的是：
1、在css里创建动画时候要处理兼容性
2、在调用的时候不单要处理兼容性> -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ;
还要注意animation：animation-name,animation-duration,animation-timing-function,animation-iteration-count
animation-name:是用来定义一个动画的名称
animation-duration是用来指定元素播放动画所持续的时间长，取值:为数值，单位为s （秒.）其默认值为“0”。
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式.
具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic- bezier。就是播放速度~
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：fixed 宽度问题_html/css_WEB-ITnoseNächster Artikel：网页如何缓存图片_html/css_WEB-ITnose