【CSS3动画】条状的加载中的动画效果
原创,转载请注明出处,谢谢
昨天看到这么一张gif图,然后今天试了试做成了动画,纯CSS3实现,不支持IE9及以下。
缺点:
- 木有效果图诶,只能您自己动手建个文件看一下咯~
- 延迟我只想到了分开定义,对于数量多的情况下似乎就不太友好了。。。写个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>