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 </head>
 7 <style type="text/css">
 8 body { background:#000; }
 9 .loadBox { position:absolute; top:40%; left:40%; }
10 .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10 {
11     float:left; width:20px; height:20px; background:#fff; margin-right:5px;
12     -moz-animation:fadebg 2s 0s infinite;
13     -webkit-animation:fadebg 2s 0s infinite;
14     animation:fadebg 2s 0s infinite;
15 }
16 .box2 {
17     -moz-animation-delay:0.1s;
18     -webkit-animation-delay:0.1s;
19     animation-delay:0.1s;
20 }
21 .box3 {
22     -moz-animation-delay:0.2s;
23     -webkit-animation-delay:0.2s;
24     animation-delay:0.2s;
25 }
26 .box4 {
27     -moz-animation-delay:0.3s;
28     -webkit-animation-delay:0.3s;
29     animation-delay:0.3s;
30 }
31 .box5 {
32     -moz-animation-delay:0.4s;
33     -webkit-animation-delay:0.4s;
34     animation-delay:0.4s;
35 }
36 .box6 {
37     -moz-animation-delay:0.5s;
38     -webkit-animation-delay:0.5s;
39     animation-delay:0.5s;
40 }
41 .box7 {
42     -moz-animation-delay:0.6s;
43     -webkit-animation-delay:0.6s;
44     animation-delay:0.6s;
45 }
46 .box8 {
47     -moz-animation-delay:0.7s;
48     -webkit-animation-delay:0.7s;
49     animation-delay:0.7s;
50 }
51 .box9 {
52     -moz-animation-delay:0.8s;
53     -webkit-animation-delay:0.8s;
54     animation-delay:0.8s;
55 }
56 .box10 {
57     -moz-animation-delay:0.9s;
58     -webkit-animation-delay:0.9s;
59     animation-delay:0.9s;
60 }
61 @-moz-keyframes fadebg {
62     0% { background:#3ff; }
63     20% { background:#fff; }
64 }
65 @-webkit-keyframes fadebg {
66     0% { background:#3ff; }
67     20% { background:#fff;}
68 }
69 @keyframes fadebg {
70     0% { background:#3ff; }
71     20% { background:#fff; }
72 }
73 .loadBox .text { clear:both; padding-top:5px; color:#fff; text-align:center; }
74 </style>
75 <body>
76     <div class="loadBox">
77         <div class="box1"></div>
78         <div class="box2"></div>
79         <div class="box3"></div>
80         <div class="box4"></div>
81         <div class="box5"></div>
82         <div class="box6"></div>
83         <div class="box7"></div>
84         <div class="box8"></div>
85         <div class="box9"></div>
86         <div class="box10"></div>
87         <div class="text">加载中...</div>
88     </div>
89 </body>
90 </html>
posted @ 2012-06-18 16:37  长风freedom  阅读(193)  评论(0)  编辑  收藏  举报