效果图如下:
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading span {
width: 8px;
height: 8px;
background-color: #3B27B8;
position: absolute;
border-radius: 50%;
-webkit-animation: LoadAni 1.04s ease infinite;
animation: LoadAni 1.04s ease infinite;
}
@-webkit-keyframes LoadAni {
0% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
@keyframes LoadAni {
0% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loading span:nth-child(1) {
left: 0;
top: 50%;
margin-top: -4px;
-webkit-animation-delay: 0.13s;
animation-delay: 0.13s;
}
.loading span:nth-child(2) {
left: 5px;
top: 5px;
-webkit-animation-delay: 0.26s;
animation-delay: 0.26s;
}
.loading span:nth-child(3) {
left: 50%;
top: 0;
margin-left: -4px;
-webkit-animation-delay: 0.39s;
animation-delay: 0.39s;
}
.loading span:nth-child(4) {
right: 5px;
top: 5px;
-webkit-animation-delay: 0.52s;
animation-delay: 0.52s;
}
.loading span:nth-child(5) {
right: 0;
top: 50%;
margin-top: -4px;
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.loading span:nth-child(6) {
right: 5px;
bottom: 5px;
-webkit-animation-delay: 0.78s;
animation-delay: 0.78s;
}
.loading span:nth-child(7) {
left: 50%;
bottom: 0;
margin-left: -4px;
-webkit-animation-delay: 0.91s;
animation-delay: 0.91s;
}
.loading span:nth-child(8) {
left: 5px;
bottom: 5px;
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}