答案：通过CSS的filter与transition属性可实现图片模糊、灰度等平滑过渡效果，常用于悬停交互，需注意性能优化与兼容性。
在网页设计中，图片滤镜过渡效果可以增强用户体验，让视觉交互更自然。通过CSS的 filter 和 transition 属性，我们可以轻松实现如模糊（blur）、灰度（grayscale）等效果的平滑过渡。
1. 基础滤镜属性：blur 与 grayscale
CSS 的 filter 属性允许我们对图像应用图形效果。常用的滤镜包括：
- blur(px)：给图像添加高斯模糊，值越大越模糊
- grayscale(%)：将图像转为灰度，100% 完全灰度，0% 原图
例如：
img {filter: blur(2px) grayscale(50%);
}
2. 添加过渡效果：transition
单独使用滤镜是瞬间生效的。要实现平滑过渡，需配合 transition 属性。通常在鼠标悬停（:hover）时触发变化。
立即学习“前端免费学习笔记（深入）”；
示例：图片默认清晰彩色，悬停时变模糊且灰度化
img {filter: blur(0) grayscale(0);
transition: filter 0.4s ease;
}
img:hover {
filter: blur(3px) grayscale(100%);
}
这里 transition 设置了 filter 属性在 0.4 秒内缓动变化，视觉上更柔和。
3. 实际应用场景建议
这类效果常用于：
- 作品集或相册中，鼠标移入时突出当前图片
- 链接式图片，通过滤镜提示可点击状态
- 背景图渐变进入，提升页面加载质感
注意不要过度使用模糊，以免影响内容可读性。同时推荐设置 transform 配合 opacity 来提升性能，因为 filter 可能引起重绘开销。
4. 兼容性与优化提示
现代主流浏览器都支持 filter 和 transition，但旧版IE不支持。如需兼容，可考虑降级显示。
性能方面，若图片较多，建议：
- 控制 transition 时间在 0.2–0.6s 之间
- 避免同时对多个滤镜做复杂动画
- 必要时用 will-change: filter 提前告知浏览器
基本上就这些。掌握 filter 与 transition 的组合，能让图片交互更有层次感，关键在于适度与流畅。
