hue-rotate动画不显彩虹是因为色相旋转需基于有定义HSL坐标的颜色，纯黑或透明色无色相可转；须用hsl(0,100%,50%)等明确色值，配linear缓动与will-change:filter确保流畅。
hue-rotate 动画为什么看起来“不彩虹”？
直接对文字用 filter: hue-rotate(360deg) 加 @keyframes，往往只看到灰白闪烁或饱和度崩塌，不是预期的流畅彩虹——因为 hue-rotate 只改变色相，不保证亮度和饱和度稳定；原始文字颜色（比如纯黑 #000）本身色相无定义，旋转无效。
- 必须先给文字一个有明确 HSL 坐标的底色，推荐用
hsl(0, 100%, 50%)（纯红）或hsl(240, 100%, 50%)（纯蓝） - 避免用
color: #000或color: transparent起始，它们在 hue-rotate 下无响应 - 需配合
animation-timing-function: linear，否则色相跳变不匀速，彩虹感断裂
完整可用的 CSS 动画写法
以下代码可直接粘贴使用，已绕过常见渲染陷阱：
@keyframes rainbow-text {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
<p>.rainbow {
color: hsl(0, 100%, 50%);
animation: rainbow-text 4s linear infinite;
/<em> 关键：防止硬件加速导致滤镜失效 </em>/
will-change: filter;
}</p>
-
4s是周期长度，调短会更“闪”，但低于1.5s易引发视觉不适 -
will-change: filter在 Safari 和部分 Chrome 版本中是必需的，否则动画卡顿或不触发 - 若文字有背景，确保背景非纯白/纯黑，否则会吃掉饱和度，建议加轻微
background-color: #f8f9fa
与 background-image 渐变方案对比
有人用 background-image: linear-gradient(...) + background-clip: text 模拟彩虹，但它和 hue-rotate 本质不同：
-
background-clip方案是静态色带平移，只能模拟“扫过”效果，无法实现全文字同步渐变色相 -
hue-rotate真正让每个像素的色相随时间连续旋转，更接近光谱流动感 - 但
hue-rotate在 Firefox 中对text的滤镜支持略弱于 Chrome，若需全兼容，得降级为 SVG<text></text>+filter
移动端闪烁异常的修复点
在 iOS Safari 或安卓 WebView 中，文字可能突然变暗、卡顿甚至消失——这不是代码错，是渲染管线限制：
- 禁用
-webkit-text-stroke类修饰，它和filter同时存在时极易冲突 - 避免在
position: fixed或transform: translateZ(0)元素上直接应用动画，改用 wrapper 包一层再动 filter - 真机调试时发现闪烁，优先检查是否启用了深色模式，
hsl()值在深色下可能溢出，可加color-scheme: light锁定
实际跑起来后，最常被忽略的是「起始色必须可旋转」和「移动端的渲染隔离」。没加 will-change 或用了 #000，十次有九次以为是浏览器 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
