<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading</title>
</head>
<style>
*{ margin: 0; padding: 0;}
/*小圆点组成的圆*/
.circlebox{ width: 40px; height: 40px; position: absolute; left:50%; top:50%;}
.circlebox p{ width: 12px; height: 12px; background: red;border-radius: 50%; position: absolute; animation: move 1.5s infinite linear;}
.circlebox p:nth-of-type(1){ left: 0; top: 0;}
.circlebox p:nth-of-type(2){ right: 0; top: 0;}
.circlebox p:nth-of-type(3){ right: 0; bottom: 0;}
.circlebox p:nth-of-type(4){ left: 0; bottom: 0;}
.circlebox:nth-of-type(2){ transform: rotate(45deg);}
/*小圆点动态缩放效果*/
@keyframes move{
0%{ transform: scale(0);}
50%{ transform: scale(1);}
100%{ transform: scale(0);}
}
/*小圆点动态缩放顺序*/
.circlebox:nth-of-type(1) p:nth-of-type(1){animation-delay: -0.1s;}
.circlebox:nth-of-type(2) p:nth-of-type(1){animation-delay: -0.3s;}
.circlebox:nth-of-type(1) p:nth-of-type(2){animation-delay: -0.5s;}
.circlebox:nth-of-type(2) p:nth-of-type(2){animation-delay: -0.7s;}
.circlebox:nth-of-type(1) p:nth-of-type(3){animation-delay: -0.9s;}
.circlebox:nth-of-type(2) p:nth-of-type(3){animation-delay:-1.1s;}
.circlebox:nth-of-type(1) p:nth-of-type(4){animation-delay: -1.3s;}
.circlebox:nth-of-type(2) p:nth-of-type(4){animation-delay: -1.5s;}
</style>
<body>
<div class="circlebox">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="circlebox">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
