hsl() + animation 是最轻量可控的纯 CSS 色彩轮播方案；因色相 h 为 0–360 连续值，可线性插值，避免 rgb() 的脏色过渡，且浏览器原生支持；需用 0%→359° 避免 Safari 卡顿，配合 linear 和 8–12s 周期实现视觉舒适轮播。
纯 CSS 实现颜色随时间自动轮播，hsl() + animation 是最轻量、最可控的方式；用 CSS 变量驱动只是锦上添花，不是必需项——但一旦引入变量，就能动态调整色相起点、步长或周期，避免硬编码关键帧。
为什么优先选 hsl() 而不是 rgb() 或十六进制？
hsl() 的色相（h）是 0–360 的连续数值，动画时可直接线性插值；而 rgb() 三通道独立变化会导致中间出现灰阶、脏色，#ff0000 → #00ff00 动画会经过大量不可控的棕/褐/灰过渡。浏览器对 hsl() 的插值是原生支持的，无需 JS 干预。
- 色相
h每增加 60°，就跨过一个主色（红→黄→绿→青→蓝→紫→红） - 饱和度
s和亮度l建议固定（如hsl(var(--h), 80%, 60%)），否则动画易发虚或过曝 - 不要在
@keyframes里写hsl(0, 80%, 60%) → hsl(360, 80%, 60%)：虽然语义正确，但部分旧版 Safari 会卡在终点不重置，应写成hsl(0, 80%, 60%) → hsl(359, 80%, 60%)
@keyframes 中如何写平滑循环的色相动画？
关键不是“从 0 到 360”，而是让动画结束帧和起始帧视觉无缝衔接。下面这段代码能稳定跑满整个周期：
@keyframes hue-rotate {
0% { background-color: hsl(0, 80%, 60%); }
100% { background-color: hsl(359, 80%, 60%); }
}
然后在元素上启用：
立即学习“前端免费学习笔记（深入）”；
.color-loop {
animation: hue-rotate 8s linear infinite;
}
- 用
linear而非ease：色相变化需要匀速，否则会感觉“卡顿”或“跳变” - 周期设为 8s 或 12s 比较符合人眼节奏；低于 5s 易眩晕，高于 15s 显得迟滞
- 若需更长周期但保持流畅，可延长
animation-duration，同时把关键帧拆成多段（如 0%→25%→50%→75%→100%），但没必要——单段已足够
用 CSS 变量控制起始色相和周期，怎么写才不翻车？
变量必须在 :root 或目标元素上声明，并确保它被实际读取。错误写法：hsl(var(--start-hue), 80%, 60%) 直接塞进 @keyframes ——CSS 不允许在 @keyframes 内引用变量。
正确做法是：用变量控制 animation-delay 或通过伪类/属性切换触发不同动画，但更实用的是「用变量生成多个预设动画」：
:root {
--hue-start: 0;
}
.color-loop--warm {
--hue-start: 20;
animation: hue-rotate 10s linear infinite;
}
.color-loop--cool {
--hue-start: 200;
animation: hue-rotate 10s linear infinite;
}
再配合 JS 动态改 style.setProperty('--hue-start', newHue)，就能实时干预——但注意：这只会改变新动画的起点，不会重置正在运行的动画。如需热更新，得先 animation: none 触发重排，再恢复 animation。
- 变量不能直接参与
@keyframes计算，这是硬限制 - 想用 JS 控制色相流动节奏？别动
animation-duration，改animation-play-state: paused / running更稳妥 - 移动端 Safari 对
hsl()动画有轻微闪烁，加will-change: background-color可缓解
真正难的不是写出来，而是让颜色轮播“看起来舒服”：起始色相选错、饱和度飘高、周期卡在呼吸感临界点，都会让用户下意识皱眉。调的时候盯着动画看 10 秒，如果眼睛没发酸、没想快进，那基本就过关了。
