标签:
CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~
简单Demo:
html代码:
<div id="dv1"></div>
CSS3代码:
<style type="text/css">
#dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;}
@webkit-keyframes{
0%{left:0px;top:0px;}
25%{left:200px;top:0px;}
50%{left:200px;top:200px;}
75%{left:0px;top:200px;}
100%{left:0px;top:0px;}
}
</style>
--------------------下面演示一个让圆持续旋转的Demo
代码如下:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #dv1{ width:100px;height:100px;border:100px solid green; border-left-color:yellow;border-top-color:red;border-bottom-color:blue; border-radius:50%; -webkit-animation:myAnimation 3s infinite linear; } @-webkit-keyframes myAnimation{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } </style> </head> <body> <div id="dv1"></div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/shuai7boy/p/5467113.html