不能直接用 hue-rotate() 实现纯背景色动态渐变动画，因其是对整个渲染层的后处理，而非仅作用于背景色；它只旋转色相，不改变亮度与饱和度，且需完整 filter 声明、合理缓动与尺寸保障。
不能直接用 hue-rotate() 实现“纯背景色”的动态渐变动画——它不是调色盘，而是对整个渲染层做后处理。你看到的“变色”，其实是现有背景（含颜色、图片、文字）被统一旋转色相的结果。
为什么 background-color + hue-rotate 看起来不对劲
常见现象：设了 background-color: #ff6b6b，再加 filter: hue-rotate(90deg)，结果不是预想的绿色，而是偏灰、发脏的黄绿；或者动画过程中颜色跳变、饱和度丢失。
-
hue-rotate()不改变亮度和饱和度，只旋转 HSL 色相环——原色越饱和，效果越明显；灰、黑、白或低饱和色旋转后几乎无变化 - 它作用于整个元素盒（包括边框、文字、子元素），不是仅作用于背景层；若父容器有
opacity或其他filter，会叠加干扰 - 浏览器对
filter插值不保证线性，尤其在低端设备上，hue-rotate(0deg) → 360deg可能卡顿或闪帧
@keyframes 中必须显式写出完整 filter 声明
错误写法：from { hue-rotate(0deg); }（漏掉 filter: 前缀）或 to { filter: brightness(1.2) hue-rotate(360deg); }（混写多个 filter 函数但没合并）。
- 每个关键帧都必须带完整
filter:声明，例如：from { filter: hue-rotate(0deg); }、to { filter: hue-rotate(360deg); } - 如果还需增强色彩表现，要合并写成：
filter: hue-rotate(180deg) saturate(1.5) contrast(1.1);—— 多个函数在同一filter值里用空格分隔 - 动画时长建议 ≥ 3s，太短易感知跳变；缓动选
linear，避免ease导致中间段色相变化过慢
真正可控的“动态背景色”该怎么做
想让背景本身平滑流动变色，hue-rotate 是捷径但非正解。更可靠的方式是：
立即学习“前端免费学习笔记（深入）”；
- 用
background-image: linear-gradient()配合 CSS 自定义变量 +@keyframes控制 HSL 色相值，例如：linear-gradient(hsl(var(--h1), 100%, 60%), hsl(calc(var(--h1) + 120), 100%, 60%)) - 若坚持用
hue-rotate，请把背景设为纯白或浅灰（background-color: #fff），再靠旋转拉出全色相变化——白色经hue-rotate后可呈现干净的彩虹过渡 - 避免同时设置
background-color和强filter；真要混用，先在 DevTools 里关掉其他样式，单独验证filter效果
最易被忽略的一点：动画生效的前提是元素有明确尺寸和非透明内容。空 div 若没设 width/height 或 min-height，filter 就没东西可处理——别怪动画“没反应”，先检查盒子是否存在。
