实现文字渐变动画需用background-clip: text配合linear-gradient背景与background-position位移；逐字动画用ch单位+animation-delay；text-shadow动画须整体声明；优先使用transform/opacity保障性能。
文字颜色渐变动画用 @keyframes + background-clip
纯色文字变色容易，但“彩色流动”效果必须借助背景图和裁剪。核心是把渐变背景铺到文字上，再用 background-clip: text 和 -webkit-text-fill-color: transparent 暴露出来。
常见错误是漏写 -webkit- 前缀，或忘记设 color 为 transparent，导致文字被默认颜色盖住。
-
background-image必须是线性渐变（linear-gradient），不能用径向或其他类型 - 动画对象是
background-position，不是color或opacity - 需要同时加
background-size: 200% 200%才能让位移有足够空间
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
<p>.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientShift 6s ease-in-out infinite;
}逐字出现动画靠 ch 单位 + animation-delay 计算
想让“Hello”五个字母一个一个弹出来，不能靠 JavaScript 插入 span——CSS 原生就能做，关键是用 ch 单位控制 width，再配合 overflow: hidden 和延迟动画。
容易踩的坑：字体等宽与否影响 ch 精度；中文字符在多数字体里不占 1ch，得实测或改用 em 配合 letter-spacing 调整。
立即学习“前端免费学习笔记（深入）”；
- 每个字母需包裹在独立
<span></span>中（无法纯 CSS 自动拆分） - 动画使用
width: 0 → width: 1ch，触发重排，性能略低于 transform - 延迟时间按索引乘以固定值，例如
animation-delay: calc(var(--i) * 0.2s)，需配合自定义属性传入序号
text-shadow 动画实现发光/抖动效果
比 transform 更轻量的文字动态效果，适合做悬停高亮、呼吸光晕。注意：多层 text-shadow 同时动画会触发重绘，但不会重排，性能尚可。
典型错误是把多个阴影写成一行后只 animating 其中一个值，结果其余阴影静止——必须把整个 text-shadow 声明作为动画属性。
- 单层阴影动画（如模糊半径变化）：用
text-shadow: 0 0 <blur><color></color></blur> - 多层阴影需保持层数一致，否则动画会跳变（浏览器不补间缺失层）
- 避免在长段落上全局启用，
text-shadow动画在低端设备上可能掉帧
.pulse-glow {
animation: glow 2s infinite alternate;
}
<p>@keyframes glow {
from { text-shadow: 0 0 5px #fff, 0 0 10px #fff; }
to { text-shadow: 0 0 15px #ff6b6b, 0 0 25px #ff6b6b; }
}动画卡顿？优先用 transform 和 opacity
文字动画一旦涉及 width、height、left/top 或 text-shadow 大量层叠，就容易触发 Layout 或 Paint。真正流畅的方案是绕开这些属性。
比如“打字机动画”，不要用 width 切割，改用 transform: scaleX(0 → 1) + origin-x 控制方向；“淡入逐字”用 opacity 替代 color: rgba() 变化。
-
transform和opacity是仅有的两个能走合成层（compositor layer）的 CSS 属性 - 哪怕只是
color动画，也比text-shadow多层更耗资源（因涉及字体渲染重绘） - 用
will-change: transform提前提示浏览器优化，但别滥用——对静态文字加这个反而降低性能
实际项目里，最常被忽略的是字体加载时机：@font-face 加载完成前，动画可能基于 fallback 字体运行，导致宽度/高度错乱。务必用 font-display: swap 并监听 document.fonts.load() 再启动关键动画。
