【CSS3动画】条状的加载中的动画效果

原创，转载请注明出处，谢谢

 昨天看到这么一张gif图，然后今天试了试做成了动画，纯CSS3实现，不支持IE9及以下。

 缺点：

  1. 木有效果图诶，只能您自己动手建个文件看一下咯~
  2. 延迟我只想到了分开定义，对于数量多的情况下似乎就不太友好了。。。写个js可以实现，暂时没想到纯的CSS的解决办法

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style>
 8             .boxcontainer 
 9             {
10                 align-items: center;
11                 width: 100px;
12                 height: 30px;
13                 display: -webkit-box;
14                 display: flex;
15                 -moz-box-orient: horizontal;
16                 -webkit-box-orient: horizontal;
17             }
18             .item 
19             {
20                 background-color: black;
21                 margin: 1px;
22                 color: #fff;
23                 padding: 0 3px;
24                 height: 30px;
25                 -moz-animation:  go 1s infinite;
26                 -ms-animation: go 1s infinite;
27                 -webkit-animation: go 1s infinite;
28             }
29             @-moz-keyframes go {
30                 0% {height: 30px;}
31                 50% {height: 60px;}
32                 100% {height: 30px;}
33             }
34             @-ms-keyframes go {
35                 0% {height: 30px;}
36                 50% {height: 60px;}
37                 100% {height: 30px;}
38             }
39             @-webkit-keyframes go {
40                 0% {height: 30px;}
41                 50% {height: 60px;}
42                 100% {height: 30px;}
43             }
44             #d1
45             {
46                 -webkit-animation-delay: .2s;
47                 -moz-animation-delay: .2s;
48                 -ms-animation-delay: .2s;
49             }
50             #d2
51             {
52                 -webkit-animation-delay: .4s;
53                 -moz-animation-delay: .4s;
54                 -ms-animation-delay: .5s;
55             }
56             #d3
57             {
58                 -webkit-animation-delay: .6s;
59                 -moz-animation-delay: .6s;
60                 -ms-animation-delay: .6s;
61             }
62             #d4
63             {
64                 -webkit-animation-delay: .8s;
65                 -moz-animation-delay: .8s;
66                 -ms-animation-delay: .8s;
67             }
68         </style>
69     </head>
70     <body>
71         <div style="height: 20px;"></div>
72         <div class="boxcontainer">
73             <div class="item">
74             </div>
75             <div class="item" id="d1">
76             </div>
77             <div class="item" id="d2">
78             </div>
79             <div class="item" id="d3">
80             </div>
81             <div class="item" id="d4">
82             </div>
83         </div>
84     </body>
85 </html>

 

posted @ 2017-01-04 15:32  阿星喵  阅读(467)  评论(0)    收藏  举报