CSS 小球随着椭圆移动

html代码：

css代码： 

.background-img {
    height: 32vw;
    width: 60%;
    margin-top: 1vw;
    text-align: center;
}

.area {
    width: 100%;
    height: 100%;
    position: relative;
}

.area:hover>.ball {
    animation-play-state: paused; 
}

.area>.ball {
    width: 7.0313vw;
    height: 7.0313vw;
    position: absolute;
    border-radius: 7.0313vw;
    background-image: linear-gradient(to top, #051F56, #1B8EF8);
    color: #E1EAFE;
}

.area>.ball1 {

    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate;
}

.area>.ball2 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate;
}

.area>.ball3 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate;
}

.area>.ball4 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate;
}

.area>.ball5 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate;
}

.area>.ball6 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate;
}

.area>.ball7 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -20s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate;
}

.area>.ball8 {
    animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -22.5s infinite alternate,
        anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,
        scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate;
}

/* 动画 */

/* 在X轴上的移动 */
@keyframes anmiteX {
    from {
        left: 56vw;
    }

    to {
        left: -1vw;
    }
}

/* 在轴上Y的移动 */
@keyframes anmiteY {
    from {
        top: 7vw;
    }

    to {
        top: 28vw;
    }
}

/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.3, 1.3);
        opacity: 1;
    }

    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.5;
    }
}