使用CSS filter结合transition或animation可实现图片悬停时的自然变色、褪色或特效，通过grayscale、brightness等函数控制视觉效果，配合过渡动画使变化流畅，避免生硬切换，提升用户体验。
想让图片在鼠标悬停时自然地变色、褪色或增加视觉特效？CSS 的 filter 属性结合 animation 或 transition 能轻松实现流畅的滤镜动画效果。关键在于合理使用 filter 函数并配合过渡动画，而不是生硬切换。
理解 CSS filter 常用函数
filter 属性支持多种图像处理函数，可单独使用也可组合。常见函数包括：
- grayscale(%)：将图片转为灰度，100% 完全黑白
- brightness(%)：调整亮度，低于 100% 变暗，高于则变亮
- contrast(%)：设置对比度
- saturate(%)：饱和度，0% 完全去色
- blur(px)：添加高斯模糊
- hue-rotate(deg)：色相旋转
多个函数可用空格分隔写在一起，例如：
filter: grayscale(50%) brightness(120%) blur(2px);
使用 transition 实现平滑滤镜变化
最常见的是鼠标悬停（hover）触发滤镜变化。通过 transition 定义 filter 的过渡效果，让变化更柔和。
示例代码：
立即学习“前端免费学习笔记（深入）”；
img {filter: grayscale(100%);
transition: filter 0.4s ease;
}
img:hover {
filter: grayscale(0%);
}
这段代码让图片默认为黑白，鼠标移上时在 0.4 秒内恢复彩色，过渡自然。
使用 @keyframes 创建复杂滤镜动画
如果需要自动播放或更复杂的动态效果，可以用 @keyframes 配合 animation。
比如让图片持续轻微“呼吸”般变亮变暗：
@keyframes pulse {0%, 100% { filter: brightness(100%); }
50% { filter: brightness(130%) saturate(120%); }
}
img.animated {
animation: pulse 3s infinite ease-in-out;
}
这个动画会让图片周期性地变亮并略微增强饱和度，营造生动感。
性能与兼容性提示
filter 动画虽然强大，但涉及 GPU 渲染，过度使用可能影响性能，尤其是 blur 或多层复合滤镜。
- 优先使用 transition 而非持续运行的 animation
- 避免在大量图片上同时启用复杂滤镜动画
- 现代浏览器基本支持 filter，但老版本 IE 不支持，需注意兼容性
- 可搭配 will-change: filter 提升动画性能
基本上就这些。掌握 filter 和 transition 的搭配，再灵活运用 keyframes，就能做出专业级的图片动画效果，无需 JavaScript。关键是控制节奏和幅度，让视觉变化自然不突兀。
