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;
                }
            }
    }
相关推荐
lypzcgf5 分钟前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
yuguo.im6 分钟前
Chrome DevTools Performance 是优化前端性能的瑞士军刀
前端·javascript·性能优化·chrome devtools
FSHOW2 小时前
【独立开发日记】MQ端到端类型安全
前端·javascript·后端
老华带你飞2 小时前
社区互助|基于SSM+vue的社区互助平台的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·社区互助平台
一支鱼2 小时前
前端使用次数最多的工具封装
前端·typescript·编程语言
GIS之路3 小时前
GDAL 简介
前端
前端工作日常3 小时前
单元测试与E2E测试中使用浏览器的原因及区别
前端·单元测试
chxii3 小时前
7.2elementplus的表单布局与模式
javascript·vue.js·elementui
Js_cold3 小时前
Notepad++使用技巧1
前端·javascript·fpga开发·notepad++
接着奏乐接着舞。4 小时前
前端RSA加密遇到Java后端解密失败的问题解决
java·开发语言·前端