结合小组里_animation.less的几个Loading效果
之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制，但是代码量一下子蹭蹭蹭就上去了，看得头晕，不简洁。还好我们小组有一个已经封装好_animation.less。
以下是几个loading栗子。
第一个效果
<div class="loader-inner ball-clip-rotate">
<div></div>
</div>
.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);
}
.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);
}
}
}
第二个效果
<div class="loader-inner ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
.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
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