只改hsl()的h值就能实现平滑彩虹文本，因h是0–360循环色相，匀速过渡可自然插值遍历光谱；必须固定s=100%、l=60%，禁用rgb/十六进制及hsla，单位要完整，起止设0→360，timing-function用linear。
直接用 hsl() 在 @keyframes 中线性改变色相（H）就能实现平滑彩虹文本，但必须固定饱和度（S）和亮度（L，否则颜色会发灰、跳变或失去流动感。
为什么只改 hsl() 的 H 值就能出彩虹
HSL 的色相 H 是 0–360 的循环数值：0 和 360 都是红色，120 是绿色，240 是蓝色。只要让 H 从 0 匀速过渡到 360，浏览器就会自然插值遍历整个光谱——不是靠多段硬切，而是真正连续的色相位移。
- 必须用
hsl()，不能用rgb()或十六进制：后者插值路径是线性的，中间必经大量灰褐色，不是真彩虹 - 别用
hsla()除非真需要透明度：alpha 通道会干扰视觉连贯性，尤其在动画中易出现闪烁 -
H可以超 360（如hsl(390, 100%, 60%)），等价于hsl(30, 100%, 60%)，适合无限循环，避免 360→0 跳帧
@keyframes 中写 hsl() 色相循环的正确姿势
关键不是“能不能动”，而是“动得稳不稳”。浏览器对 hsl() 插值很敏感，参数一错整条声明就失效，退成透明或继承色。
- 必须写全单位：
hsl(0, 100%, 60%)✅，hsl(0, 100, 60)❌（缺 % 就不生效） - 起止值要设为完整一圈：
from { color: hsl(0, 100%, 60%); }→to { color: hsl(360, 100%, 60%); }；写成 0→359 会导致末尾卡顿 - 动画时长建议 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%)），否则灰影乱跑会破坏效果
最容易被忽略的是 S 和 L 的稳定性——哪怕 H 动得再顺，只要 S 掉到 80% 或 L 在 40%–70% 之间起伏，人眼立刻感知为“脏”“闷”“不亮”。固定 S: 100%、L: 60% 是底线，不是可选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
