原理:利用animate动画和时间差绘制小原点。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: #F0F0F0;
}
.load8 {
margin: 0 auto;
width: 20px;
height: 20px;
position: relative
}
.container1>div,.container2>div,.container3>div {
width: 6px;
height: 6px;
background-color: #0f0;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.load8 .load8-container {
position: absolute;
width: 100%;
height: 100%
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg)
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg)
}
.circle1 {
top: 0;
left: 0
}
.circle2 {
top: 0;
right: 0
}
.circle3 {
right: 0;
bottom: 0
}
.circle4 {
left: 0;
bottom: 0
}
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s
}
.container3 .circle1 {
-webkit-animation-delay: -1s;
animation-delay: -1s
}
.container1 .circle2 {
-webkit-animation-delay: -.9s;
animation-delay: -.9s
}
.container2 .circle2 {
-webkit-animation-delay: -.8s;
animation-delay: -.8s
}
.container3 .circle2 {
-webkit-animation-delay: -.7s;
animation-delay: -.7s
}
.container1 .circle3 {
-webkit-animation-delay: -.6s;
animation-delay: -.6s
}
.container2 .circle3 {
-webkit-animation-delay: -.5s;
animation-delay: -.5s
}
.container3 .circle3 {
-webkit-animation-delay: -.4s;
animation-delay: -.4s
}
.container1 .circle4 {
-webkit-animation-delay: -.3s;
animation-delay: -.3s
}
.container2 .circle4 {
-webkit-animation-delay: -.2s;
animation-delay: -.2s
}
.container3 .circle4 {
-webkit-animation-delay: -.1s;
animation-delay: -.1s
}
@-webkit-keyframes bouncedelay {
0%,100%,80% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1)
}
}
@keyframes bouncedelay {
0%,100%,80% {
transform: scale(0);
-webkit-transform: scale(0)
}
40% {
transform: scale(1);
-webkit-transform: scale(1)
}
}
</style>
</head>
<body>
<div class="load8">
<div class="load8-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="load8-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="load8-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</body>
</html>