CSS如何实现图片模糊到清晰的平滑加载_利用filter:blur与opacity-css教程-PHP中文网

图片模糊到清晰效果本质是CSS过渡实现的视觉占位，需设display:block、监听load事件并用.loaded类触发filter/opacity过渡，避免内联元素兼容性问题及过渡失效。

css如何实现图片模糊到清晰的平滑加载_利用filter:blur与opacity

图片模糊到清晰的加载效果，本质是用 filter:blur() + opacity 配合 CSS 过渡实现的「视觉占位+渐进呈现」，不是真正控制图片解码或加载时机；它只在图片已加载完成的前提下起作用。

为什么直接对用 `filter:blur(5px)` + `transition` 不一定生效

常见现象：图片一闪就清晰，过渡没动；或模糊态根本没渲染出来。原因有三：

默认是内联元素，filter 在部分浏览器（尤其旧版 Safari）对内联元素过渡支持不稳定，必须显式设 display: block 或 inline-block
图片加载完成前 DOM 已渲染，但此时 blur 值可能被浏览器优化跳过（尤其 src 是 data URL 或本地路径时）
没处理加载状态：图片还没 load 事件触发，就提前移除了模糊类，导致过渡丢失

正确做法：用 `img.addEventListener('load', ...)` 触发类切换

必须等图片真实加载完毕再开始过渡，否则 blur → none 的动画会失效。推荐结构如下：

@@##@@

CSS 中定义初始态和过渡态：

.blur-up {
  filter: blur(6px);
  opacity: 1;
  transition: filter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 必须加 display，否则 Safari 可能不触发 filter 过渡 */
  display: block;
}
.blur-up.loaded {
  filter: blur(0);
  opacity: 1;
}

JS 控制加载后加类：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

document.querySelectorAll('img.blur-up').forEach(img => {
  if (img.complete) {
    img.classList.add('loaded');
  } else {
    img.addEventListener('load', () => img.classList.add('loaded'));
  }
});