HTML
<div class="container">
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<!-- <div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div> -->
</div>
CSS
body{
background: blueviolet;
}
.container{
position: absolute;
left: 50%;
top:50%;
}
.circle-container {
width: 400px;
height: 200px;
/* background: red; */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.circle-container:after{
content: '';
width: 20px;
height: 5px;
position: absolute;
background: #000;
border-radius: 50%;
bottom: 0;
left: 50%;
opacity: 0.7;
filter: blur(1px);
animation: shadow 2s linear infinite;
}
.circle-container:nth-child(2):after {
animation-delay: -.3s;
}
.circle-container:nth-child(3):after {
animation-delay: -.6s;
}
.circle{
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
animation: anim 2s linear infinite;
}
.circle-container:nth-child(2) .circle{
/* display: none; */
animation-delay: -.3s;
}
.circle-container:nth-child(3) .circle{
/* display: none; */
animation-delay: -.6s;
}
@keyframes anim {
0%{
transform-origin: 400% 50%;
transform: rotate(0);
}
50%{
transform-origin: 400% 50%;
transform: rotate(360deg);
}
50.1%{
transform-origin: -300% 50%;
transfotm: rotate(0deg);
}
100%{
transform-origin: -300% 50%;
transfotm: rotate(-360deg);
}
}
@keyframes shadow {
0%{}
12.5%{
transform: translate(50px) scale(0.6);
}
25%{
transform: translate(110px);
}
37.5%{
transform: translate(50px) scale(1.4);
}
50%{
transform: translate(0px);
}
62.5%{
transform: translate(-50px) scale(0.6);
}
75%{
transform: translate(-110px);
}
87.5{
transform: translate(-50px) scale(1.4);
}
100%{
transform: translate(0px);
}
}
