css中Filter与transition结合可实现平滑视觉动效，如blur和brightness配合用于图片悬停高亮或模糊淡入淡出；通过设置transition过渡时间及贝塞尔曲线，并添加will-change提升性能，广泛应用于卡片聚焦、加载占位、暗黑模式切换等场景。
在网页设计中，CSS过渡（transition）与 filter 滤镜结合使用，能实现非常自然的视觉动效。特别是 blur（模糊）和 brightness（亮度）这两个滤镜属性，在配合 transition 时可以创造出平滑的渐变效果，比如图片悬停高亮、模糊淡入淡出等。
filter 滤镜基础属性说明
CSS 的 filter 属性允许你对元素应用图形效果，常见值包括：
- blur(px)：设置高斯模糊程度，值越大越模糊
- brightness(%)：调整亮度，100% 为原图，低于 100% 变暗，高于则变亮
- 多个滤镜可用空格分隔写在一起
例如：
filter: blur(5px) brightness(1.2);
结合 transition 实现平滑渐变
要让 filter 效果产生动画过渡，必须添加 transition 属性。由于 filter 是一个复合值，浏览器会自动对数值部分进行插值计算，从而实现渐变动效。
立即学习“前端免费学习笔记（深入）”；
示例：图片悬停时去除模糊并提亮
img { filter: blur(8px) brightness(0.8); transition: filter 0.4s ease; } img:hover { filter: blur(0) brightness(1); }
这个例子中，鼠标移上图片时，模糊逐渐消失，同时亮度恢复，整个过程流畅自然。
实用技巧与注意事项
虽然 filter + transition 效果强大，但使用时要注意以下几点：
- 性能敏感场景慎用 blur，尤其大范围或高像素模糊可能影响渲染帧率
- 建议将 transition 单独作用于 filter，避免影响其他属性动画
- 可搭配 will-change: filter 提升动画性能（用于频繁变化的元素）
- 某些旧版浏览器需加前缀或不支持 filter 过渡
提升性能的小技巧：
img { filter: blur(8px); transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: filter; }
常见应用场景
这类组合广泛用于现代网页交互中：
- 卡片悬停聚焦：背景模糊 + 主体提亮
- 加载占位图：先模糊显示低质图，加载完成再清晰化
- 暗黑模式切换：通过 brightness 调整图像适配深色背景
- 导航菜单图标动态反馈
基本上就这些。掌握 filter 与 transition 的配合，能让界面细节更有质感，关键在于控制好过渡时间和滤镜幅度，避免过度炫技影响用户体验。