因为HSL的H值是0–360循环色相，从0线性过渡到360可平滑遍历全光谱；须用hsl()而非rgb/十六进制，且@keyframes起止设为hsl(0…)和hsl(360…)以确保完整一圈。
为什么直接改 hsl() 的 h 值就能出彩虹效果
因为 hsl() 中的 h（色相）是一个 0–360 的循环数值：0 和 360 都是红色，120 是绿色，240 是蓝色。只要让 h 在动画中从 0 线性过渡到 360，颜色就会自然走过整个光谱——不是靠多个颜色硬切，而是真正平滑的渐变彩虹。
注意：必须用 hsl()（不是 rgb() 或十六进制），否则无法实现连续色相位移；也别用 hsla() 除非你真需要透明度，否则 alpha 会干扰视觉连贯性。
用 @keyframes 定义色相循环动画
关键点在于起始和结束状态都设为同一色相值（比如 hsl(0, 100%, 60%) → hsl(360, 100%, 60%)），这样浏览器会识别为完整一圈，动画更稳。如果写成 0 → 359，末尾可能跳帧或卡顿。
@keyframes rainbow { from { color: hsl(0, 100%, 60%); } to { color: hsl(360, 100%, 60%); } }- 动画时长建议设为
3s–6s：太短（如1s）眼花，太长（如10s）看不出流动感 - 务必加
animation-timing-function: linear，否则默认ease会让颜色在红/蓝端“滞留”，破坏光谱均匀性
应用到文字上要注意的三件事
单纯加 animation 可能不生效，尤其在内联元素（如 <span></span>）上：
立即学习“前端免费学习笔记（深入）”；
- 确保文字容器有明确的
display，比如display: inline-block或display: block（某些旧版 Safari 对inline元素的color动画支持不稳定） - 避免父级设置了
color且未被覆盖——子元素动画会受层叠影响，建议直接在目标元素上写color初始值 - 如果文字有描边（
text-shadow）或背景，记得同步动画或设为透明，否则色相变化会被遮盖；例如：text-shadow: 0 0 8px hsl(0, 0%, 80%)就不该动h，否则灰影也跟着乱跑
兼容性和性能小陷阱
绝大多数现代浏览器（Chrome 84+、Firefox 75+、Safari 14+）都支持 hsl() 动画，但仍有两个现实问题：
- Safari 13.1 及更早版本不支持对
color属性做hsl()插值动画，会直接跳变——可降级为@supports (animation: rainbow) { ... }包裹，或改用filter: hue-rotate()（但那是整体偏色，不是逐字彩虹） - 在长段落上同时动画几十个字符，
color属于可合成属性，一般没问题；但如果叠加了text-shadow或background-clip，GPU 负担会上升，低端安卓机可能出现掉帧 - 别试图用 JS 动态改
style.color来模拟——CSS@keyframes才是真硬件加速，JS 改色是主线程重绘，卡顿明显
最简可用组合就这三行：color: hsl(0, 100%, 60%) + animation: rainbow 4s linear infinite + 正确的 @keyframes 定义。其余都是围绕它排雷。
