千年之约（文本动画）

马黑黑

马黑黑

参考代码

1. <style>
   
2.     #pa { margin: 20px auto; width: 100%; height: 460px; position: relative; }
   
3.     .text {
   
4.         margin: 10px;
   
5.         font: bold 60px 'Microsoft YaHei', sans-serif;
   
6.         color: #eee;
   
7.         text-shadow: 0 0 1px #000, 2px 2px 6px #333;
   
8.         display: inline-block;
   
9.     }
   
10.     .ani { animation: circle 2s linear; }
    
11.     @keyframes circle {
    
12.         to { transform: rotate(360deg); }
    
13.     }
    
14. </style>
    
15. 
    
16. <div id="pa"></div>
    
17. 
    
18. <script>
    
19.     const txtAr = '千年之约'.split('');
    
20.     let spans = [];
    
21.     txtAr.forEach( (t,k) => {
    
22.         const s = document.createElement('span');
    
23.         s.textContent = t;
    
24.         s.className = k === 0 ? 'text ani' : 'text';
    
25.         spans.push(s);
    
26.         s.onanimationend = () => {
    
27.             s.classList.remove('ani');
    
28.             spans[(k+1) % txtAr.length].classList.add('ani');
    
29.         };
    
30.         pa.appendChild(s);
    
31.     });
    
32. </script>

复制代码

马黑黑

用于帖子时，#pa 应改为别的名称、宽高另定、设为绝对定位，便于在帖子上安排位置。

动画可以换成别的方式。

动画工作原理：创建 span 标签时，第一个标签立即添加上.ani 类（24行代码），它运行 circle 动画；每一个 span 标签在运行完关键帧动画后，立马从 classList 列表中移除 ani 类，下一个则添加上 ani 类，这样N个 span 标签会轮次运行动画（26~29行代码）。

span 标签默认是行内标签，需要在CSS里给它添加一个 display: inline-block; 属性值，或者，将 span 标签设置为绝对定位（需要额外安排位置）。

亚伦影音工作室

马黑黑 发表于 2025-7-27 23:32
用于帖子时，#pa 应改为别的名称、宽高另定、设为绝对定位，便于在帖子上安排位置。

动画可以换成别的方 ...

真漂亮，谢谢老师！

杨帆

真美！谢谢马老师精彩分享

红影

这个真好，能自己判断，并依次逐字运行动画，还能从头循环。
这些都是JS功劳呢，当然，是黑黑设计的JS，黑黑的功劳更大

红影

马黑黑 发表于 2025-7-27 23:32
用于帖子时，#pa 应改为别的名称、宽高另定、设为绝对定位，便于在帖子上安排位置。

动画可以换成别的方 ...

来学习一下动画工作原理，原来是从列表中移除和添加 ani 类的过程。
谢谢黑黑的讲解，学习了

马黑黑

红影 发表于 2025-7-28 19:02
这个真好，能自己判断，并依次逐字运行动画，还能从头循环。
这些都是JS功劳呢，当然，是黑黑设计的JS，黑 ...

马黑黑

红影 发表于 2025-7-28 19:08
来学习一下动画工作原理，原来是从列表中移除和添加 ani 类的过程。
谢谢黑黑的讲解，学习了

这是常用的关键帧动画接力实现方法

马黑黑

杨帆 发表于 2025-7-28 13:34
真美！谢谢马老师精彩分享

马黑黑

亚伦影音工作室 发表于 2025-7-28 09:06
真漂亮，谢谢老师！

红影

马黑黑 发表于 2025-7-28 19:30
这是常用的关键帧动画接力实现方法

关键帧动画接力实现方法，这个方法很重要，应该学会呢

红影

马黑黑 发表于 2025-7-28 19:29

的确应该谢黑黑的，你咋这表情

马黑黑

红影 发表于 2025-7-28 22:28
关键帧动画接力实现方法，这个方法很重要，应该学会呢

其实就是监听 animationend 事件，即动画播放完毕。设置为永远循环即 infinite 的动画没有这个事件，因为它总播放不完，只有设置了具体次数或不设置次数的才有播放完结的时候。

onanimationend 就是监听动画播放完毕的写法之一，这是传统用法，现在兴用 addEventListener() 方法，它们功能一致，后者更被青睐是因为它可以使用更多的参数并可以解除监听。

马黑黑

红影 发表于 2025-7-28 22:32
的确应该谢黑黑的，你咋这表情

谢来谢去谢个没完

红影

马黑黑 发表于 2025-7-28 22:35
其实就是监听 animationend 事件，即动画播放完毕。设置为永远循环即 infinite 的动画没有这个事件，因为 ...

嗯，监听有执行和移出操作，就实现这样的效果了。

红影

马黑黑 发表于 2025-7-28 22:38
谢来谢去谢个没完

也是，那个听黑黑，不谢了，把谢意放心里

马黑黑

红影 发表于 2025-7-29 13:16
也是，那个听黑黑，不谢了，把谢意放心里

丢了也行，放心里是个累赘

马黑黑

红影 发表于 2025-7-29 13:16
嗯，监听有执行和移出操作，就实现这样的效果了。

大概是酱紫

红影

马黑黑 发表于 2025-7-29 13:17
丢了也行，放心里是个累赘

不累赘呢，心里地方大，塞点什么都不觉得多啊