运行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #cbcbcb;
}
.main{
height: 200px;
width: 180px;
display: grid;
grid-template-columns: repeat(6,16.666%);
grid-template-rows: repeat(1,100%);
text-align: center;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
.main span{
position: absolute;
font-size: 25px;
}
.main .main-circle-1{color:#00FFFF;left: 0;animation: move 1s ease-in-out infinite;animation-delay:0s;}
.main .main-circle-2{color:#FF8C00;left: 16.6%;animation: move 1s ease-in-out infinite;animation-delay:0.1s;}
.main .main-circle-3{color: #FFD700;left: 33.3%;animation: move 1s ease-in-out infinite;animation-delay:0.2s;}
.main .main-circle-4{color:#EE82EE;left: 50%;animation: move 1s ease-in-out infinite;animation-delay:0.3s;}
.main .main-circle-5{color:#FF6347;left: 66.6%;animation: move 1s ease-in-out infinite;animation-delay:0.4s;}
.main .main-circle-6{color:#40E0D0;left: 83.3%;animation: move 1s ease-in-out infinite;animation-delay:0.5s;}
/*.main .main-circle-1{
animation: move 1s ease-in-out infinite;
}*/
@keyframes move {
0%{top: 80%}
100%{top: 0}
}
</style>
</head>
<body>
<div class="main">
<span class="main-circle-1">●</span>
<span class="main-circle-2">●</span>
<span class="main-circle-3">●</span>
<span class="main-circle-4">●</span>
<span class="main-circle-5">●</span>
<span class="main-circle-6">●</span>
</div>
</body>
</html>
