1.效果展示

#yyds干货盘点#CSS实现loading效果_loading

2.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
}
.box>div{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.box>div::before{
content: '';
display: block;
width: 15%;
height: 15%;
margin: 0 auto;
border-radius: 50%;
background-color: #ccc;
animation: fading-circle 1.2s infinite ease-in-out;
}
/*第二个点*/
.box>div.b1{
transform: rotate(30deg);
}
.box>div.b1::before{
animation-delay: -1.1s;
}
/*第三个点*/
.box>div.b2{
transform: rotate(60deg);
}
.box>div.b2::before{
animation-delay: -1.0s;
}
/*第四个点*/
.box>div.b3{
transform: rotate(90deg);
}
.box>div.b3::before{
animation-delay: -.9s;
}
/*第五个点*/
.box>div.b4{
transform: rotate(120deg);
}
.box>div.b4::before{
animation-delay: -.8s;
}
/*第六个点*/
.box>div.b5{
transform: rotate(150deg);
}
.box>div.b5::before{
animation-delay: -.7s;
}
/*第七个点*/
.box>div.b6{
transform: rotate(180deg);
}
.box>div.b6::before{
animation-delay: -.6s;
}
/*第八个点*/
.box>div.b7{
transform: rotate(210deg);
}
.box>div.b7::before{
animation-delay: -.5s;
}
/*第九个点*/
.box>div.b8{
transform: rotate(240deg);
}
.box>div.b8::before{
animation-delay: -.4s;
}
/*第十个点*/
.box>div.b9{
transform: rotate(270deg);
}
.box>div.b9::before{
animation-delay: -.3s;
}
/*第十一个点*/
.box>div.b10{
transform: rotate(300deg);
}
.box>div.b10::before{
animation-delay: -.2s;
}
/*第二个点*/
.box>div.b11{
transform: rotate(330deg);
}
.box>div.b11::before{
animation-delay: -.1s;
}
/*第一个点*/
.box>div.b12{
transform: rotate(360deg);
}

@keyframes fading-circle{
0%, 39%, 100% {
opacity: 0 ;
}
40% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>
<div class="b8"></div>
<div class="b9"></div>
<div class="b10"></div>
<div class="b11"></div>
<div class="b12"></div>
</div>
</body>
</html>