hue-rotate是CSS filter函数，通过调整元素颜色的色相角度（0deg-360deg）改变整体色调，适用于图标变色、悬停动画和主题适配，可与其他滤镜组合优化视觉效果，提升页面动态性与兼容性。
CSS的filter属性可以用来为元素添加视觉特效，其中hue-rotate()函数能有效改变元素的颜色色调。这个功能特别适合在不修改原始图片或内容的前提下，动态调整图标、图片或文字的配色，适用于主题切换、交互反馈等场景。
什么是 hue-rotate？
hue-rotate(angle) 是 filter 的一个函数，用于对元素的颜色进行色相旋转。色相是色彩的“类型”，比如红、绿、蓝等，在色轮上以角度表示（0° 到 360°）。
通过设置不同的角度值，可以让元素整体颜色沿着色轮进行变换：
- 0deg：保持原色
- 90deg：向绿色/黄色方向偏移
- 180deg：颜色变为对立色（如红变青）
- 270deg：进一步旋转，趋向紫色
- 360deg：回到原始颜色
基本语法与用法
使用filter: hue-rotate(angle)即可应用色相调整：
立即学习“前端免费学习笔记（深入）”；
示例代码：
img {
filter: hue-rotate(90deg);
}
这会让图片整体色调顺时针旋转90度。你可以在:hover等状态中动态改变角度，实现有趣的悬停效果：
img:hover {
filter: hue-rotate(180deg);
}
结合其他滤镜增强效果
hue-rotate 可与其他 filter 函数组合使用，例如 saturate、brightness 等，以获得更理想的视觉表现：
.icon {
filter: hue-rotate(270deg) saturate(1.5) brightness(0.9);
}
-
saturate(1.5)增强饱和度，让颜色更鲜艳 -
brightness(0.9)稍微调暗，避免过亮
组合使用能让转换后的颜色更自然，尤其在处理低饱和图像时很有帮助。
实际应用场景
1. 图标主题适配
将单色SVG图标嵌入页面后，通过hue-rotate快速匹配不同主题色，无需准备多套资源。
2. 悬停动画
为按钮或图片添加transition，配合hue-rotate实现平滑的色彩过渡动画。
.animated-icon {
filter: hue-rotate(0deg);
transition: filter 0.4s ease;
}
.animated-icon:hover {
filter: hue-rotate(180deg);
}
3. 夜间模式色彩调整
在深色模式下，轻微调整图片或图标的色相，使其更融合背景，减少视觉突兀感。
基本上就这些。合理使用hue-rotate，能让你的网页更具动态感和适应性，而且性能开销小，兼容性也较好（现代浏览器均支持）。关键在于尝试不同角度，找到最合适的视觉平衡点。
