css
body{
background-color:#63a1f4;
}
.loader1, .loader2, .loader3, .loader4, .loader5, .loader6, .loader7, .loader8, .loader9, .loader10, .loader11, .loader12,
.loader13, .loader14, .loader15, .loader16, .loader17, .loader18{
box-sizing:border-box;
width:100px;
height:100px;
position:absolute;
animation:rotation 6s infinite linear;
}
.loader1{
left:100px;
top:100px;
}
.loader2{
left:300px;
top:100px;
}
.loader3{
left:500px;
top:100px;
}
.loader4{
left:700px;
top:100px;
}
.loader5{
left:900px;
top:100px;
}
.loader6{
left:1100px;
top:100px;
}
.loader7{
left:100px;
top:300px;
}
.loader8{
left:300px;
top:300px;
}
.loader9{
left:500px;
top:300px;
}
.loader10{
left:700px;
top:300px;
}
.loader11{
left:900px;
top:300px;
}
.loader12{
left:1100px;
top:300px;
}
.loader13{
left:100px;
top:500px;
}
.loader14{
left:300px;
top:500px;
}
.loader15{
left:500px;
top:500px;
}
.loader16{
left:700px;
top:500px;
}
.loader17{
left:900px;
top:500px;
}
.loader18{
left:1100px;
top:500px;
}
.circle{
box-sizing:border-box;
border-radius:50%;
}
.border-1{
border:2px solid #fff;
}
.border-2{
border-top:2px solid #fff;
border-left:2px solid #fff;
border-bottom:2px solid transparent;
border-right:2px solid transparent;
}
.border-3{
border-top:2px solid #fff;
border-left:2px solid transparent;
border-bottom:2px solid transparent;
border-right:2px solid transparent;
}
.loader18 .border-3, .loader18{
border-bottom:2px solid #fff;
}
.spinner-container-A{
position:absolute;
width:80%;
height:80%;
left:10%;
top:10%;
animation:rotation 4s infinite linear;
}
.spinner-container-B{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
animation:rotation 4s infinite linear;
}
.spinner-container-C{
position:absolute;
width:80%;
height:80%;
left:10%;
top:10%;
}
.spinner-1{
position:absolute;
width:50%;
height:50%;
left:calc(7.32% - 1px);
top:calc(7.32% - 1px);
}
.spinner-2{
position:absolute;
width:75%;
height:75%;
left:calc(3.66% - 1px);
top:calc(3.66% - 1px);
}
.spinner-3{
position:absolute;
animation:resize 4s infinite linear;
}
.spinner-4{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
animation:resize 4s infinite linear, rotation 4s infinite linear;
}
.spinner-5{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
animation:resize2 4s infinite linear, rotation 4s infinite linear;
}
@keyframes rotation{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes resize{
0%,100%{
width:calc(100% + 4px);
height:calc(100% + 4px);
left:-2px;
top:-2px;
}
50%{
width:50%;
height:50%;
left:calc(7.32% - 1px);
top:calc(7.32% - 1px);
}
}
@keyframes resize2{
0%,100%{
width:calc(100% + 4px);
height:calc(100% + 4px);
left:-2px;
top:-2px;
}
50%{
width:50%;
height:50%;
left:25%;
top:25%;
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
