使用css filter的hue-rotate()配合@keyframes动画实现图片悬停彩虹效果，通过0deg→360deg循环色相变化，并可叠加saturate()和contrast()增强色彩表现，支持起始色、速度及缓动曲线微调。
用 CSS 的 filter 配合 :hover 伪类，就能让图片悬停时呈现彩虹色动态效果。核心是使用 hue-rotate() 搭配 animation，而非单次静态色相偏移——真彩虹感来自色相连续变化。
基础实现：CSS 动画驱动色相旋转
直接在图片上添加悬停动画，让色相（hue）在 0deg 到 360deg 之间循环变化：
- 给
<img>设置transition: filter 0.3s ease可让进入/离开更平滑（可选） - 用
@keyframes定义从hue-rotate(0deg)→hue-rotate(360deg)的完整循环 - 悬停时触发该动画，并设为无限循环、匀速播放
示例代码：
img {
display: inline-block;
vertical-align: middle;
}
img:hover {
animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
增强效果：叠加饱和度与对比度
纯 hue-rotate 可能显得发灰。加入 saturate(150%) 和 contrast(110%) 能让色彩更鲜活、边界更清晰：
- 把多个 filter 函数写在同一行，空格分隔：
filter: hue-rotate(120deg) saturate(150%) contrast(110%) - 动画中每帧同步调整所有值，例如在
@keyframes里统一写全 - 避免过度增强（如
saturate(300%)），否则细节会丢失
兼容性与性能提示
现代浏览器（Chrome/Firefox/Safari/Edge 100+）均支持 filter 和 hue-rotate，但需注意：
- IE 完全不支持，若需兼容旧环境，得降级为静态滤镜或 JS 方案
- 动画用
transform或opacity更高效；filter动画在低端设备可能掉帧 - 可加
will-change: filter提示浏览器提前优化（慎用，仅对频繁动画元素）
进阶微调：控制节奏与起始色
不想从红色开始？想变慢一点？只需改动画关键帧和时长：
- 起始色由
0%的hue-rotate值决定（如hue-rotate(90deg)从绿色启始） - 加快节奏：把
3s改成1.5s；减慢则增大数值 - 要“呼吸式”节奏（先快后慢），把
linear换成ease-in-out
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
