关于CSS3动画之多圆同轨迹环绕圆运动

最新推荐文章于 2024-05-10 09:42:14 发布

graciedu

最新推荐文章于 2024-05-10 09:42:14 发布

阅读量1.3k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/graciedu/article/details/124276718

版权

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)，cubic-bezier（x1,y1,x2,y2)。

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。

<head>
    <meta charset="UTF-8">
    <title>沿圆形轨迹运动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        /* 定义轨道属性 */
        #trajectory {
            width: 300px;
            height: 300px;
            border: 4px solid #949494;
            border-radius: 50%;
            position: relative;
            left: calc(50% - 153px);
            top: calc(50% - 153px);
        }
       
        /* 定义所有球的起始位置和属性 */
        #move1,
        #move2,
        #move3,
        #move4,
        #move5,
        #move6,
        #move7{
            left: -22px;
            top: -22px;
            width: 40px;
            height: 40px;
            font-size: 12px;
            background-color: #32c33a;
            border-radius: 50%;
            position: absolute;
        }
         /* 定义动画 */
        @keyframes move1X {
            0% {
                left: -22px;
            }
            100% {
                left: 282px;
            }
        }
        
        @keyframes move1Y {
            0% {
                top: -22px;
            }
            100% {
                top: 282px;
            }
        }
        /* 设置动画运动属性 */
        /* animation:动画名称  动画时长   速度曲线   延迟时间   重复次数  动画方向  执行完毕时状态; */
        /* 修改延迟时间（贝塞尔曲线后面的那个秒数），每个球的间隔要相同 */
        #move1 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }
        
        #move2 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -0.4s infinite alternate;
        }
        #move3 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -2.8s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -0.8s infinite alternate;
        }
        #move4 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -3.2s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -1.2s infinite alternate;
        }
        #move5 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -3.6s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -1.6s infinite alternate;
        }
        #move6 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
        }
        #move7 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -4.4s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate;
        }
        
    </style>
</head>

<body>
    <div id="trajectory">
        <div id="move1">Immortal brother1</div>
        <div id="move2">Immortal brother2</div>
        <div id="move3">Immortal brother3</div>
        <div id="move4">Immortal brother4</div>
        <div id="move5">Immortal brother5</div>
        <div id="move6">Immortal brother6</div>
        <div id="move6">Immortal brother6</div>
    </div>
</body>