论坛 › 马黑黑教程专版 › 纯HTML+CSS实现锵锵三珠行

马黑黑 发表于 2022-8-31 12:27

纯HTML+CSS实现锵锵三珠行

<style>
#papa {
        margin: 10px auto 0;
        width: 400px;
        height: 200px;
        position: relative;
}
.ball {
        --delay: 0s;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: orange;
        animation: move 6s var(--delay) infinite;
}
.b1 { --delay: 0.5s; background: tomato; }
.b2 { --delay: 1s; background: olive; }

@keyframes move{
        0%, 100% { left: 0; top: 0; }
        25% { left: calc(100% - 20px); top: 0; }
        50% { left: calc(100% - 20px); top: calc(100% - 20px); }
        75% { left: 0; top: calc(100% - 20px); }
}
</style>

<p>效果：<br><br></p>
<div id="papa">
        <span class="ball"></span>
        <span class="ball b1"></span>
        <span class="ball b2"></span>
</div>

马黑黑 发表于 2022-8-31 12:28

代码：
<style>
#papa {
        margin: 10px auto 0;
        width: 400px;
        height: 200px;
        position: relative;
}
.ball {
        --delay: 0s;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: orange;
        animation: move 6s var(--delay) infinite;
}
.b1 { --delay: 0.5s; background: tomato; }
.b2 { --delay: 1s; background: olive; }

@keyframes move{
        0%, 100% { left: 0; top: 0; }
        25% { left: calc(100% - 20px); top: 0; }
        50% { left: calc(100% - 20px); top: calc(100% - 20px); }
        75% { left: 0; top: calc(100% - 20px); }
}
</style>

<div id="papa">
        <span class="ball"></span>
        <span class="ball b1"></span>
        <span class="ball b2"></span>
</div>

马黑黑 发表于 2022-8-31 12:32

原理：

三颗珠子使用同一个关键帧动画，各有运行延时：第一颗延时0s，第二颗延时0.5s，第三颗延时1s；animation 调用关键帧动画周期时长6s，循环运行。

如果需要平滑运行，animation需要加入一个值 linear 即可。

马黑黑 发表于 2022-8-31 12:37

例中关于 CSS calc 方法的使用：

主要用于关键帧动画。例如，25%时，令珠子运行到父元素矩形的右上角，取值为

25% { left: calc(100% - 20px; 0; };

100% 表示父元素的宽度尺寸，它减去珠子的宽度（20px）即得到动画运行到 25% 时珠子在右上角内侧。其他语句的理解，依此类推。

红影 发表于 2022-8-31 12:37

这个延时加入得有趣，让三个珠子你追我赶的，看得特别有趣{:4_187:}

红影 发表于 2022-8-31 12:39

这个不带JS的，理解起来也特别容易{:4_173:}

红影 发表于 2022-8-31 12:40

高和宽的不同，本身就让三个求的运动速度感觉不同，再加上延时的使用，让这个动态更觉得活泼{:4_199:}

上海朝阳 发表于 2022-8-31 12:42

有趣，滑溜地像在冰上

马黑黑 发表于 2022-8-31 12:50

上海朝阳 发表于 2022-8-31 12:42
有趣，滑溜地像在冰上

嗯，这个应该有点用途

马黑黑 发表于 2022-8-31 12:51

红影 发表于 2022-8-31 12:40
高和宽的不同，本身就让三个求的运动速度感觉不同，再加上延时的使用，让这个动态更觉得活泼

主要是延时的作用。至于在水平方向和纵向方向上速度的差异，你理解的对。

马黑黑 发表于 2022-8-31 12:51

红影 发表于 2022-8-31 12:39
这个不带JS的，理解起来也特别容易

但要很多珠子时，还是需要JS的

马黑黑 发表于 2022-8-31 12:52

红影 发表于 2022-8-31 12:37
这个延时加入得有趣，让三个珠子你追我赶的，看得特别有趣

挺有意思的吧？看看能用来做什么？

红影 发表于 2022-8-31 13:23

马黑黑 发表于 2022-8-31 12:51
主要是延时的作用。至于在水平方向和纵向方向上速度的差异，你理解的对。

所以这样错错落落的，效果很不错。

红影 发表于 2022-8-31 13:23

马黑黑 发表于 2022-8-31 12:51
但要很多珠子时，还是需要JS的

三个就挺好的{:4_173:}

红影 发表于 2022-8-31 13:24

马黑黑 发表于 2022-8-31 12:52
挺有意思的吧？看看能用来做什么？

螳螂捕蝉黄雀在后？可以做这个主题的吧。

马黑黑 发表于 2022-8-31 18:11

红影 发表于 2022-8-31 13:24
螳螂捕蝉黄雀在后？可以做这个主题的吧。

可以试试？

马黑黑 发表于 2022-8-31 18:12

红影 发表于 2022-8-31 13:23
三个就挺好的

三猪同行，必有你师焉？

马黑黑 发表于 2022-8-31 18:13

红影 发表于 2022-8-31 13:23
所以这样错错落落的，效果很不错。

还行

红影 发表于 2022-9-1 20:52

马黑黑 发表于 2022-8-31 18:11
可以试试？

做了一个，不太好，还不如珠珠好看呢{:4_173:}

红影 发表于 2022-9-1 20:52

马黑黑 发表于 2022-8-31 18:12
三猪同行，必有你师焉？

还是算了，我怕我自己也成珠珠{:4_173:}

查看完整版本: 纯HTML+CSS实现锵锵三珠行