color属性不支持渐变色，需用background-image配合-webkit-background-clip:text实现文字渐变动画，Firefox需SVG方案兼容，兼顾性能与可访问性。
color 属性不支持渐变色，keyframes 里写 linear-gradient() 会失效
直接在 @keyframes 中对 color 设置 linear-gradient(45deg, red, blue) 不起作用——color 只接受单色值（如 #ff0000、rgb(255,0,0)、hsl(0,100%,50%)），不解析渐变函数。浏览器会静默忽略该声明，回退到初始/结束色，动画看起来“跳变”或完全不动。
用 background-image + -webkit-background-clip 实现文字渐变动画
真正可行的方案是把渐变画在背景上，再用文字裁剪出背景。必须配合 text-fill-color: transparent 和 -webkit-background-clip: text（目前仅 WebKit 内核原生支持，Firefox 需额外处理）。
- 只对块级或行内块元素生效，需设
display: inline-block或block -
background-size要大于文字宽高，否则动画位移不明显；常用200% 200% - 动画控制的是
background-position，不是颜色本身 - Firefox 下需补
background-clip: text（无前缀），但目前仍不支持，实际项目建议降级为纯色动画或 JS 方案
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.gradient-text {
display: inline-block;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientShift 4s ease-in-out infinite;
}
想兼容 Firefox 或需要更可控的渐变动画？改用 SVG <text></text> + <animate></animate>
SVG 的 <lineargradient></lineargradient> 支持在 <animate></animate> 中动态修改 offset、stop-color 等，且全平台兼容。缺点是无法直接套用 CSS 动画语法，需内联 SVG 或用 JS 控制。
- 把文字转成 SVG
<text></text>，填充用url(#grad) - 用
<animate></animate>修改<stop></stop>的offset或stop-color，实现平滑过渡 - 若需响应式，SVG 宽高需设为
100%，并加preserveAspectRatio="xMidYMid meet"
<svg viewBox="0 0 200 60">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff6b6b">
<animate attributeName="stop-color" values="#ff6b6b;#4ecdc4;#44b5b1;#ff6b6b" dur="4s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#4ecdc4">
<animate attributeName="stop-color" values="#4ecdc4;#44b5b1;#ff6b6b;#4ecdc4" dur="4s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<text x="10" y="40" font-size="24" fill="url(#grad)">Hello</text>
</svg>
别忽略性能和可访问性
文字渐变动画本质是持续重绘背景层，高频动画可能触发合成层切换，低端设备易掉帧。同时，color: transparent 会让屏幕阅读器丢失文字语义（尤其未包裹在 <span aria-label></span> 中时）。
立即学习“前端免费学习笔记（深入）”；
- 动画时长不低于 3s，避免视觉疲劳
- 添加
prefers-reduced-motion: reduce媒体查询停用动画 - 确保 fallback 文字色（如
color: #333）在禁用动画时可见 - 不要对长段落或按钮文本滥用——它更适合标题、Logo 等强视觉场景
background-clip: text 的实现深度，SVG 方案则把控制权交还给标准 DOM。前者省事但有兼容包袱，后者啰嗦却稳当。选哪个，得看你是否真需要 Firefox 用户看到那一抹流动的色彩。 
