加载聚焦 Image Blur Focus

图片初始模糊，加载后锐化聚焦，模拟图片逐步加载的视觉效果。

实时预览

css

.bf-img {
  filter: blur(8px);
  transition: filter 1s ease;
}
.bf-img.loaded { filter: blur(0); }

html

<img class="bf-img" src="image.jpg" alt="">
<!-- 加载完成后添加 .loaded 类 -->

纯 CSS 实现的加载聚焦图片动画——通过滤镜、变换和遮罩让图片在悬停或滚动时产生视觉效果。适用于商品图、相册、文章插图等场景。

Q: 图片缩放动画会影响图片清晰度吗？ A: transform: scale() 在合成层执行，图片先以原始分辨率渲染再缩放——放大时可能出现轻微模糊。建议初始加载比容器稍大的图片，缩放时只做缩小操作。或者用 image-rendering 优化。

Q: 如何让图片懒加载配合动画？ A: 使用 loading="lazy" 原生懒加载。图片加载完成前可以用 CSS 骨架屏或模糊占位（filter: blur(20px)），加载完成后添加 .loaded 类触发 blur→0 过渡。

Q: 滤镜动画（grayscale/blur）的性能如何？ A: filter 由 GPU 处理，性能较好。但 blur() 半径越大，GPU 开销越大。建议 blur 半径不超过 20px，并且在动画完成后移除/简化 filter。IE 不支持 filter，需降级。