直接用hsl()动画会断层，因浏览器对--hue变量线性插值时从359到0会经179.5导致色相倒退；解决方法是终点设为720使顺时针转两圈，配合--hue初始值、固定饱和度/亮度、无单位数值及linear动画实现无缝旋转。
为什么直接用 hsl() 动画会断层
因为 hsl() 本身不参与动画插值——浏览器只对 CSS 属性（如 background-color）做插值，而 hsl() 是函数调用，它内部的 --hue 变量才是被动画的对象。但问题在于：从 359 插值到 0，浏览器按数值线性走，会经过 179.5 这种中间值，导致色相“倒退半圈”，视觉上跳变。这不是 bug，是数值插值的必然结果。
解决办法只有一个：让动画终点远超一圈，比如 --hue: 720，这样插值路径就是平滑顺时针转两圈，人眼看不出重复，也就没有衔接感。
-
--hue必须声明初始值（哪怕在元素上写style="--hue: 0;"），否则动画第一帧无值可插，直接黑屏或默认色 - 饱和度和亮度必须固定（如
100%和60%），否则 hue 插值会被其他通道拉偏，颜色发灰或忽明忽暗 - 别用
%或deg给--hue加单位，calc(var(--hue) + 30)会直接报错
如何用 @keyframes 驱动 --hue 实现无缝旋转
关键不是写多少帧，而是起点和终点的数值设计。下面这段代码能让背景色连续转两圈，无停顿、无跳色：
```css
@keyframes rotate-hue {
0% { --hue: 0; }
100% { --hue: 720; }
}
.element {
--hue: 0;
background-color: hsl(var(--hue), 100%, 60%);
animation: rotate-hue 8s linear infinite;
}
```
注意三点：
- 动画时长建议 ≥6s，太短人眼能感知速度变化；太长则反馈迟钝
- 不能用
ease类缓动函数，必须linear，否则色相速度不均，旋转感断裂 - 如果用于加载条（比如
<progress></progress>的::progress-value），需确认浏览器支持伪元素级 CSS 变量继承（Chrome ≥115 支持，Safari 16.4+ 有兼容性坑）
加载条场景下，border 方案比 background-color 更稳
纯背景色旋转在细条形加载条上容易糊成一片，尤其在低分辨率屏。用 border 搭配 hsl() 变量，能做出清晰的“色带”效果：
```css
.loader {
width: 4px;
height: 32px;
border-radius: 2px;
background: linear-gradient(to right,
hsl(var(--hue), 100%, 50%),
hsl(calc(var(--hue) + 60), 100%, 50%),
hsl(calc(var(--hue) + 120), 100%, 50%)
);
animation: rotate-hue 4s linear infinite;
}
```
这种写法本质是把色相“分段预设”，靠 linear-gradient 拉出三色带，再整体旋转。好处是：
- 避免单色旋转带来的单调感，天然适配加载条的“流动”语义
- 即使动画卡一帧，也不会出现突兀的中间色（RGB 插值那种脏绿/紫灰）
- 比 SVG 方案轻量，不增加 DOM 节点，也不依赖
stroke-dasharray计算
最容易被忽略的兼容性点：Safari 对 calc() 在 hsl() 中的支持
Safari 16.4–17.5 对 hsl(calc(var(--hue) + N), ...) 解析不稳定，有时会丢弃整个声明。稳妥做法是：只在一个地方用 calc()，其余用固定色值兜底。
例如：
```css
.loader {
--hue: 0;
background:
linear-gradient(to right,
hsl(var(--hue), 100%, 50%),
hsl(120, 100%, 50%), /* Safari 兜底 */
hsl(240, 100%, 50%)
);
animation: rotate-hue 6s linear infinite;
}
```
真正需要动态计算色相的地方，仅保留在 @keyframes 里驱动 --hue，其他所有 hsl() 调用都尽量静态化——这是目前跨浏览器最省心的平衡点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
