SOURCE

<div class="body">
	<div class="wrapper"></div>
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
    <div class="item item7">7</div>
</div>

.body {
    position: relative;
    margin: 200px;
    background: greenyellow;
}

.wrapper {
    width: 400px;
    height: 200px;
    border-radius: 50%;
    transform: scaleY(0.5);
    border: 3px solid pink;
}
.item {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: blue;
}
.item1 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) -4s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 0s infinite alternate
} 
.item2 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) -2s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 2s infinite alternate
}
.item3 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) 0s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 4s infinite alternate
}
.item4 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) 2s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 6s infinite alternate
}
.item5 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) 4s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 8s infinite alternate
}
.item6 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) 6s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 10s infinite alternate
}
.item7 {
    animation: animX 8s cubic-bezier(0.38, 0, 0.62, 1) 8s infinite alternate, animY 8s cubic-bezier(0.38, 0, 0.62, 1) 12s infinite alternate
}
/* .item:nth-child(1) {
    left: 0px;
    top: 50px;
}
.item:nth-child(2) {
    left: 30px;
    top: 40px;
}
.item:nth-child(3) {
    left: 60px;
    top: 40px;
}
.item:nth-child(42) {
    left: 90px;
    top: 40px;
}
.item:nth-child(5) {
    left: 120px;
    top: 40px;
}
.item:nth-child(6) {
    left: 150px;
    top: 40px;
} */

/* 圆点横向运动变化，需根据真实效果调整参数 */

@keyframes animX {
    0% {
        left: 0px;
    }
    100% {
        left: 400px;
    }
}


/* 圆点纵向运动变化，需根据真实效果调整参数 */

@keyframes animY {
    0% {
        top: 50px;
    }
    100% {
        top: 150px;
    }
}