CSS3动画效果 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>动画</title>
 6 <style>
 7     div{
 8         position: relative;
 9         width: 100px;
10         height: 100px;
11         background: orange;
12         animation:anima 5s infinite alternate;  //设置动画名为anima 
13         -webkit-animation:anima 5s infinite alternate;
14     }
15     @keyframes anima{  //keyframes关键帧
16         0%{
17             background: orange; top:0px;left: 0px;
18         }
19         25%{
20             background: red; top:0px;left: 400px;
21         }
22         50%{
23             background: green; top:400px;left: 400px;
24         }
25         75%{
26             background: yellow; top:400px;left: 0px;
27         }
28         100%{
29             background: pink; top:0px;left: 0px;
30         }
31     }
32         @-webkit-keyframes anima{
33         0%{
34             background: orange; top:0px;left: 0px;
35         }
36         25%{
37             background: red; top:0px;left: 800px;
38         }
39         50%{
40             background: green; top:500px;left: 900px;
41         }
42         75%{
43             background: yellow; top:400px;left: 500px;
44         }
45         100%{
46             background: pink; top:0px;left: 100px;
47         }
48     }
49 </style>
50 </head>
51  
52 <body>
53     <div>
54         <img src="poster.jpg" alt="" style="width:100px;height:100px;"/>
55     </div>
56 </body>
57 </html>

 

posted @ 2015-02-02 20:27  人间最美二月天  阅读(138)  评论(0)    收藏  举报