这个代码我个人觉得还是比较有意思的,如果你也需要过渡动画或者跳转页面的话,那么可以尝试使用这个代码作为效果,下面是效果图:
效果整体来看还是不错的,代码方面直接将下面的内容添加到CSS中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
* { margin:0px; padding:0px; border:0px; } html,body { min-height:100%; } body { background:#f8f8f8; } .loader { position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:auto; width:175px; height:100px; } .loader span { display:block; background:#fcb34f; width:7px; height:10%; border-radius:14px; margin-right:5px; float:left; margin-top:25%; } .loader span:last-child { margin-right:0px; } .loader span:nth-child(1) { animation:load 2.5s 1.4s infinite linear; } .loader span:nth-child(2) { animation:load 2.5s 1.2s infinite linear; } .loader span:nth-child(3) { animation:load 2.5s 1s infinite linear; } .loader span:nth-child(4) { animation:load 2.5s 0.8s infinite linear; } .loader span:nth-child(5) { animation:load 2.5s 0.6s infinite linear; } .loader span:nth-child(6) { animation:load 2.5s 0.4s infinite linear; } .loader span:nth-child(7) { animation:load 2.5s 0.2s infinite linear; } .loader span:nth-child(8) { animation:load 2.5s 0s infinite linear; } .loader span:nth-child(9) { animation:load 2.5s 0.2s infinite linear; } .loader span:nth-child(10) { animation:load 2.5s 0.4s infinite linear; } .loader span:nth-child(11) { animation:load 2.5s 0.6s infinite linear; } .loader span:nth-child(12) { animation:load 2.5s 0.8s infinite linear; } .loader span:nth-child(13) { animation:load 2.5s 1s infinite linear; } .loader span:nth-child(14) { animation:load 2.5s 1.2s infinite linear; } .loader span:nth-child(15) { animation:load 2.5s 1.4s infinite linear; } @keyframes load { 0% { background:#fcb34f; margin-top:25%; height:10%; } 50% { background:#ff840b; height:100%; margin-top:0%; } 100% { background:#ff840b; height:10%; margin-top:25%; } } |
同样的,需要配合HTML内容来进行展现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
有兴趣的可以自己去实践一下,操作起来应该不会很难。