CSS 小球随着椭圆移动

wyc_ok

已于 2023-09-21 18:56:15 修改

阅读量465

点赞数 2

文章标签： css 前端

于 2023-09-21 18:54:23 首次发布

本文链接：https://blog.csdn.net/wu_2004/article/details/133139990

版权

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <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>
</body>
</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;
    }
}