html代码：
<div class="box"> <p></p> <p></p> <p></p> <p></p> </div> <div class="box"> <p></p> <p></p> <p></p> <p></p> </div>
css代码：
*{
margin: 0;padding: 0;
}
body{
background-color: rgb(27, 27, 27);
}
.box{
width: 36px;
height: 36px;
margin: 300px;
position: absolute;
}
.box p{
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
animation: move 1.5s infinite linear ;
}
.box p:nth-of-type(1){left: 0;top: 0;}
.box p:nth-of-type(2){right: 0;top: 0;}
.box p:nth-of-type(3){right: 0;bottom: 0;}
.box p:nth-of-type(4){left: 0;bottom: 0;}
.box:nth-of-type(2){transform: rotate(45deg);}
@keyframes move{
0%{transform: scale(0);}
50%{transform: scale(1);}
100%{transform: scale(0);}
}
.box:nth-of-type(1) p:nth-of-type(1){animation-delay: 0.1s;}
.box:nth-of-type(2) p:nth-of-type(1){animation-delay: 0.3s;}
.box:nth-of-type(1) p:nth-of-type(2){animation-delay: 0.5s;}
.box:nth-of-type(2) p:nth-of-type(2){animation-delay: 0.7s;}
.box:nth-of-type(1) p:nth-of-type(3){animation-delay: 0.9s;}
.box:nth-of-type(2) p:nth-of-type(3){animation-delay: 1.1s;}
.box:nth-of-type(1) p:nth-of-type(4){animation-delay: 1.3s;}
.box:nth-of-type(2) p:nth-of-type(4){animation-delay: 1.5s;}