加载时的小圆点旋转效果

最新推荐文章于 2022-01-17 09:03:13 发布

Anastasian

最新推荐文章于 2022-01-17 09:03:13 发布

阅读量1k

点赞数

分类专栏：案例文章标签： less

本文链接：https://blog.csdn.net/Anastasian/article/details/72765106

版权

案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html

less

@roundDiameter:1rem; //小圆圈直径
@outDiameter:2rem; //大圆圈直径
@roundAthleticsTime:0.2s; //旋转速度
@roundNum:5; //小圆个数

.loadBox{
z-index: 1000;
position:fixed;
width:100%;
height:100%;
background:rgba(100,100,100,0.5);
top:0;
left:0;
}
.loadBox{
ul{
.blockCenter(@roundDiameter,@roundDiameter);
li{
width:@roundDiameter;
height:@roundDiameter;
border-radius: 50%;
.positionAbsolute(0,0);
animation:mymove @roundAthleticsTime*@roundNum infinite linear ;
background: @version2-main-color;
list-style: none;
opacity: 0;
}
}
}

@keyframes mymove
{
0%{transform:rotate(0deg) translate(0px,-@outDiameter);opacity: 0.1;}
50%{transform:rotate(180deg) translate(0px,-@outDiameter);opacity: 1;}
100%{transform:rotate(360deg) translate(0px,-@outDiameter);opacity:0.1;}
}

.roundAthleticsTime(@roundAthleticsTime,@num){
animation-delay:@roundAthleticsTime*@num;

}
.loadBoxChildLi(@num) when (@num<@roundNum){
.loadBox>ul>li:nth-of-type(@{num}){
/*background:red;*/
.roundAthleticsTime(@roundAthleticsTime,@num);

}
.loadBoxChildLi((@num+1));
}
.loadBoxChildLi(1);