CSS3_loading效果

写个div给他个基本样式：

1 <body>
2     <div class="load-container load" id="loader" >
3         <div class="loader">loading..</div>
4     </div>
5 </body>

 

 1 <style>
 2         body{
 3             vertical-align: baseline;
 4             margin: 0;
 5             padding: 0;
 6             background: #0dcecb none repeat scroll 0 0;
 7             color: #fff;
 8             font-family: "Lato",sans-serif;
 9             font-size: 62.5%;
10 
11         }
12         .load-container {
13             border: 1px solid rgba(255, 255, 255, 0.2);
14             box-sizing: border-box;
15             /*float: left;*/
16             height: 240px;
17             overflow: hidden;
18             position: relative;
19             width: 240px;
20             margin:100px 200px;
21         }
22         .load .loader, .load .loader:before, .load .loader:after {
23             animation: 1s ease-in-out 0s normal none infinite running load1;
24             background: #fff none repeat scroll 0 0;
25             height: 4em;
26             width: 1em;
27         }
28 
29         .load .loader:before, .load .loader:after {
30             content: "";
31             position: absolute;
32             top: 0;
33         }
34         .load .loader:before {
35             left: -1.5em;
36             -webkit-animation-delay: -0.32s;
37             animation-delay: -0.32s;
38         }
39         .load .loader:after {
40             left: 1.5em;
41         }
42         .load .loader {
43             text-indent: -9999em;
44             margin: 8em auto;
45             position: relative;
46             font-size: 11px;
47             -webkit-animation-delay: -0.16s;
48             animation-delay: -0.16s;
49         }
50 
51         @-webkit-keyframes load1 {
52             0%,
53             80%,
54             100% {
55                 box-shadow: 0 0 #FFF;
56                 height: 4em;
57             }
58             40% {
59                 box-shadow: 0 -2em #ffffff;
60                 height: 5em;
61             }
62         }
63         @keyframes load1 {
64             0%,
65             80%,
66             100% {
67                 box-shadow: 0 0 #FFF;
68                 height: 4em;
69             }
70             40% {
71                 box-shadow: 0 -2em #ffffff;
72                 height: 5em;
73             }
74         }
75 
76     </style>

效果图：

posted @ 2015-07-21 14:14  不得不爱xxy  阅读(180)  评论(0)  编辑  收藏  举报