CSS图片渐变模糊再清晰实现方法

本文详解了如何仅用纯CSS实现图片“先模糊再清晰”的视觉动效，核心是通过@keyframes动画控制filter: blur()值从较大值（如10px）平滑递减至0，并借助ease-out缓动和forwards保持态营造自然对焦感；文中不仅提供了开箱即用的代码示例，还分享了起始缩放、分段模糊、延迟触发等进阶微调技巧，同时兼顾移动端性能优化与主流浏览器兼容性要点，让开发者轻松复现专业级图片聚焦效果。

用 CSS 实现图片“先模糊再清晰”的效果，核心是结合 filter: blur() 和 @keyframes 动画控制模糊值从大到小变化。

1. 基础动画：从模糊到清晰

关键在于让 blur() 的值随时间递减。初始设为较大值（如 10px），结束时为 0，浏览器会自动插值过渡。

• 确保图片本身有 filter 可动画属性（blur() 是 CSS 可动画属性之一）
• 动画需绑定在图片或其容器上，推荐直接作用于 元素
• 避免用 opacity 混淆——那是透明度，不是清晰度

2. 完整可运行代码示例

复制粘贴即可看到效果：

<img src="photo.jpg" class="fade-in-sharp">

<style>
.fade-in-sharp {
  filter: blur(10px);
  animation: sharpen 2s ease-out forwards;
}

@keyframes sharpen {
  to {
    filter: blur(0);
  }
}
</style>

说明：forwards 保证动画结束后保持 blur(0) 状态；ease-out 让“变清晰”过程后半段更自然。

3. 进阶微调建议

想更真实？可以加点细节：

• 起始加轻微缩放或透明度（transform: scale(0.98); opacity: 0.95;），模拟对焦前的轻微失稳
• 模糊值别用整数跳变，比如从 8px → 4px → 0 分三段，比线性更像光学对焦
• 若图片加载慢，用 animation-delay: 0.3s 错开入场时机，避免“闪一下再动”

4. 注意兼容性与性能

filter: blur() 在现代浏览器（Chrome 53+、Firefox 35+、Safari 9.1+、Edge 16+）均支持。但注意：

• 移动端 Safari 对高斯模糊较吃资源，blur() 值建议不超过 6px
• 避免在大量图片上同时运行动画，可加 will-change: filter; 提示浏览器优化渲染
• 不用 JavaScript 控制时，确保图片已加载完成再触发动画（可用 img.onload 或 CSS :has() + loading="lazy" 配合处理）

基本上就这些。不复杂但容易忽略细节——关键是 blur 值要动起来，且动得顺、停得准。

今天关于《CSS图片渐变模糊再清晰实现方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！