css多个物体椭圆旋转

实现效果

html代码

css代码

.background-img{
        height:32vw;
        width:60%;
        margin-top:7vw;
        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;
                }
            }
    }