纯HTML+CSS实现锵锵三珠行

马黑黑

效果：

马黑黑

代码：

1. <style>
   
2. #papa {
   
3.         margin: 10px auto 0;
   
4.         width: 400px;
   
5.         height: 200px;
   
6.         position: relative;
   
7. }
   
8. .ball {
   
9.         --delay: 0s;
   
10.         position: absolute;
    
11.         width: 20px;
    
12.         height: 20px;
    
13.         border-radius: 50%;
    
14.         background: orange;
    
15.         animation: move 6s var(--delay) infinite;
    
16. }
    
17. .b1 { --delay: 0.5s; background: tomato; }
    
18. .b2 { --delay: 1s; background: olive; }
    
19. 
    
20. @keyframes move{
    
21.         0%, 100% { left: 0; top: 0; }
    
22.         25% { left: calc(100% - 20px); top: 0; }
    
23.         50% { left: calc(100% - 20px); top: calc(100% - 20px); }
    
24.         75% { left: 0; top: calc(100% - 20px); }
    
25. }
    
26. </style>
    
27. 
    
28. <div id="papa">
    
29.         <span class="ball"></span>
    
30.         <span class="ball b1"></span>
    
31.         <span class="ball b2"></span>
    
32. </div>

复制代码

马黑黑

原理：

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

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

马黑黑

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

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

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

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

红影

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

红影

这个不带JS的，理解起来也特别容易

红影

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

上海朝阳

有趣，滑溜地像在冰上

马黑黑

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

嗯，这个应该有点用途

马黑黑

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

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

马黑黑

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

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

马黑黑

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

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

红影

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

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

红影

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

三个就挺好的

红影

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

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

马黑黑

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

可以试试？

马黑黑

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

三猪同行，必有你师焉？

马黑黑

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

还行

红影

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

做了一个，不太好，还不如珠珠好看呢

红影

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

还是算了，我怕我自己也成珠珠