css多个物体椭圆旋转

实现效果

html代码

html 复制代码
<div class="background-img">
            <div class="area">
                <div class="ball ball1">
                </div>
                <div class="ball ball2">
                </div>
                <div class="ball ball3">
                </div>
                <div class="ball ball4">
                </div>
                <div class="ball ball5">
                </div>
                <div class="ball ball6">
                </div>
                <div class="ball ball7">
                </div>
                <div class="ball ball8">
                </div>
            </div>
        </div>

css代码

javascript 复制代码
.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;
                }
            }
    }
相关推荐
hj5914_前端新手1 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法2 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku2 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode2 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu2 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu2 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu2 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu2 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu2 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在2 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net