案例源代码
复制代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
5 <title>CSS3实现加载的动画效果4</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
12 .m-load,.m-load2{width:100px;height:100px;margin:100px auto 0;background:url('load.png') top center no-repeat;}
13 .m-load2{background:green;}
14
15 /** 加载动画的静态样式 **/
16 .m-load2{position:relative;}
17 .m-load2 .item{position:absolute;left:50%;top:0;width:14px;height:100%;margin-left:-7px;}
18 .m-load2 .item:before,.m-load2 .item:after{content:'';display:block;width:14px;height:14px;border-radius:14px;background:#fff;}
19 .m-load2 .item:after{position:absolute;bottom:0;}
20 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);}
21 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);}
22 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);}
23
24 /** 加载动画 **/
25 @-webkit-keyframes load{
26 0%{opacity:0;}
27 100%{opacity:1;}
28 }
29 .m-load2 .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0.7s infinite;}
30 .m-load2 .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.6s infinite;}
31 .m-load2 .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.5s infinite;}
32 .m-load2 .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.4s infinite;}
33 .m-load2 .item:nth-child(1):after{-webkit-animation:load 0.8s linear 0.3s infinite;}
34 .m-load2 .item:nth-child(2):after{-webkit-animation:load 0.8s linear 0.2s infinite;}
35 .m-load2 .item:nth-child(3):after{-webkit-animation:load 0.8s linear 0.1s infinite;}
36 .m-load2 .item:nth-child(4):after{-webkit-animation:load 0.8s linear 0s infinite;}
37 </style>
38 </head>
39
40 <body>
41 <p class="m-load"></p>
42
43 <p class="m-load2">
44 <p class="item"></p>
45 <p class="item"></p>
46 <p class="item"></p>
47 <p class="item"></p>
48 </p>
49 </body>
50 </html>
