文字特效为什么值得做
标题、标语、加载提示这些文字元素，是页面上最容易被忽略又最容易出彩的部分。用 JS 加一点动效，能引导视线、强化节奏。但特效不是越多越好，判断标准只有一条：它是否帮助用户更快理解内容。
打字机效果：最经典的一种
核心逻辑是定时截取字符串。用 setInterval 或 requestAnimationFrame 逐步增加 textContent 的显示长度，配合 CSS 的光标闪烁即可。
实现时注意两点：一是用 requestAnimationFrame 而不是固定间隔的定时器，动画更平滑；二是提前把完整文本写入 DOM 再用 CSS 隐藏，或使用 aria-label 标注完整内容，避免屏幕阅读器逐字朗读。循环播放时记得清理定时器，防止内存泄漏。
逐字显现与渐变流光
逐字显现常见做法是把每个字符包进 ，用 CSS transition 控制透明度和位移，JS 只负责按序添加延迟。相比纯 JS 操作样式，这种方式让浏览器走合成层，性能更好。
渐变流光则依赖 background-clip: text 配合 background-position 动画，JS 的作用更多是控制播放时机和方向。这类效果适合短标题，不适合大段正文。
粒子文字：Canvas 的用武之地
把文字绘制到离屏 Canvas 上，读取像素数据，将不透明像素的位置转成粒子坐标，再在主动画循环里绘制和运动。它视觉冲击强，但成本也高。
实践中建议：限制粒子总数，按设备像素比缩放，页面不可见时暂停循环，并给低性能设备提供降级方案，比如直接显示静态文字。粒子文字用于首屏主视觉可以，用于正文则得不偿失。
性能与可访问性清单
- 优先用 CSS 动画和
transform、opacity，JS 只做编排。 - 用
requestAnimationFrame驱动逐帧动画，离开视口时停止。 - 尊重
prefers-reduced-motion，为用户关闭动效。 - 动效文字保留可读的完整文本，别让内容依赖动画才可见。
- 避免在长文本上逐字动画，阅读体验会明显下降。
写在最后
JS 文字特效的价值不在炫技，而在传达节奏与重点。先想清楚它要解决什么问题，再选择打字机、流光还是粒子方案，通常比堆砌效果更有效。
