CSS如何实现图片由模糊到清晰的平滑加载_结合filter:blur与opacity

作者：袖梨 2026-07-29

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

图片从模糊变为清晰的加载效果，本质上是借助 filter:blur() + opacity 与 CSS 过渡组合形成「视觉占位+渐进呈现」，并不能真正控制图片解码或加载时机；只有图片完成加载后，它才会生效。

为什么直接对 `<img>` 使用 `filter:blur(5px)` + `transition` 未必有效

常见表现包括图片瞬间变清晰而没有过渡，或者模糊状态根本未被渲染。其原因共有三点：

<img> 默认属于内联元素，filter 内联元素必须显式设，因为其过渡在部分浏览器中的表现并不稳定，旧版 Safari 尤其如此 display: block 或 inline-block
图片完成加载之前 DOM 已经渲染，但这时 blur 浏览器可能不处理该值对应的优化，src 为 data URL 或本地路径时尤其容易出现
没有处理加载状态：图片尚未触发 load 事件，模糊类就被提前移除，因而丢失过渡

正确方式：使用 `img.addEventListener('load', ...)` 触发类的切换

只有等待图片真实加载完成后再启动过渡，才能避免 blur → none 动画失效。推荐采用以下结构：

<img src="photo.jpg" class="blur-up" alt="">

在 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 在加载完成后添加类：

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