结合小组里_animation.less的几个Loading效果
之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制，但是代码量一下子蹭蹭蹭就上去了，看得头晕，不简洁。还好我们小组有一个已经封装好_animation.less。
以下是几个loading栗子。
第一个效果
1 2 3 | <div class="loader-inner ball-clip-rotate"> <div></div></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .ball-clip-rotate > div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; .animation-fill-mode:both; border: 2px solid #fff; border-bottom-color: transparent; height: 25px; width: 25px; background: transparent !important; display: inline-block; .rotate(); .animation(rotate 0.75s 0s linear infinite);} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .rotate(@n:rotate){ .keyframes(@n); .-frames(@-...){ 0% { @{-}transform: rotate(0deg) scale(1); } 50% { @{-}transform: rotate(1800deg) scale(0.6); } 100% { @{-}transform: rotate(360deg) scale(1); } }} |
第二个效果
1 2 3 4 5 | <div class="loader-inner ball-scale-multiple"> <div></div> <div></div> <div></div></div> |
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 | .ball-scale-multiple(@n:ball-scale-multiple){ .keyframes(@n); .-frames(@-...){ 0% { @{-}transform: scale(0); @{-}opacity:0; } 5% { @{-}opacity:1; } 100% { @{-}transform: scale(1); @{-}opacity:0; } }}.ball-scale-multiple { position: relative; .transform(translateY(-30px)); } .ball-scale-multiple > div:nth-child(2) { .animation-delay(0.2s); } .ball-scale-multiple > div:nth-child(3) { .animation-delay(0.4s); } .ball-scale-multiple > div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; .animation-fill-mode:both; position: absolute; left: 0px; top: 0px; opacity: 0; margin: 0; width: 60px; height: 60px; .ball-scale-multiple(); .animation(ball-scale-multiple 1s 0s linear infinite); } |
更多效果戳git
手机阅读请扫描下方二维码：
上一篇：Threejs学习笔记(一) 基础篇
下一篇： 模仿网易新闻首页的滑屏切换
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1