@-webkit-keyframes load{
0%{opacity:1;}
100%{opacity:0;}
}
.m-load2 .item{-webkit-animation:load 0.5s linear 0s infinite;}
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
5 <title>CSS3实现加载的动画效果3</title>
6 <meta name="author" content="rainna" />
7 <meta name="keywords" content="rainna's css lib" />
8 <meta name="description" content="CSS3" />
9 <style>
10 *{margin:0;padding:0;}
11 .m-load{background:url('load.gif') center center no-repeat;}
12
13 .m-load,.m-load2{width:60px;height:10px;margin:100px auto;}
14
15 /** 加载动画的静态样式 **/
16 .m-load2:before,.m-load2:after,.m-load2 .item{float:left;width:10px;height:10px;margin:0 2px 0 0;background:#444;}
17 .m-load2:before,.m-load2:after{content:'';}
18
19 /** 加载动画 **/
20 @-webkit-keyframes load{
21 0%{opacity:1;}
22 100%{opacity:0;}
23 }
24 .m-load2:before{-webkit-animation:load 0.5s linear 0s infinite;}
25 .m-load2 .item:nth-child(1){-webkit-animation:load 0.5s linear 0.1s infinite;}
26 .m-load2 .item:nth-child(2){-webkit-animation:load 0.5s linear 0.2s infinite;}
27 .m-load2 .item:nth-child(3){-webkit-animation:load 0.5s linear 0.3s infinite;}
28 .m-load2:after{-webkit-animation:load 0.5s linear 0.4s infinite;}
29 </style>
30 </head>
31
32 <body>
33 <p class="m-load"></p>
34
35 <p class="m-load2">
36 <p class="item"></p>
37 <p class="item"></p>
38 <p class="item"></p>
39 </p>
40 </body>
41 </html>
