可行，但必须用伪元素隔离背景层，否则整块DOM被糊；正确做法是用::before/::after承载背景并设absolute+filter过渡，注意单位一致、will-change声明及移动端兼容性处理。
直接用 filter: blur() 配合 transition 实现背景图模糊→清晰过渡是可行的，但必须用伪元素隔离背景层，否则内容也会被糊掉——这是绝大多数人卡住的第一步。
为什么不能直接给背景容器加 blur 过渡
因为 background-image 是元素自身的绘制内容，一旦对它所在元素设置 filter: blur(4px)，整个元素（包括子元素）都会被模糊。这不是“背景模糊”，是“整块 DOM 被糊”。浏览器不会区分“只糊背景不糊文字”。
常见错误现象：加了 transition: filter 0.4s，但 hover 时文字和按钮也一起变糊、边缘发虚、甚至出现闪烁。
- 正确做法是把背景抽成独立图层：用
::before或::after伪元素承载background-image - 伪元素需设
position: absolute或fixed，并用z-index: -1确保在内容下方 - 父容器本身不要设任何
background，否则会和伪元素叠加导致颜色异常
伪元素 blur 过渡的关键写法
伪元素的 filter 过渡要生效，起始值、单位、结构三者必须严格一致。Safari 尤其敏感，漏一个 px 就跳变。
立即学习“前端免费学习笔记（深入）”；
- 初始状态必须写
filter: blur(8px)（带单位），不能是blur(0)或blur(none) - 目标状态写
filter: blur(0px)（同样带单位），数值必须是0px，不是0 - 如果同时用了
brightness()或contrast()，得写全链：比如filter: blur(8px) brightness(0.9)→filter: blur(0px) brightness(0.9)，顺序和数量都不能变 - 必须提前声明
will-change: filter在伪元素上（不是父容器），否则 Chrome/Safari 可能不触发 GPU 合成
示例：
.bg-container {
position: relative;
}
.bg-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("bg.jpg");
background-size: cover;
filter: blur(8px);
transition: filter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: filter;
z-index: -1;
}
.bg-container.is-clear::before {
filter: blur(0px);
}
移动端 Safari 和旧版 Chrome 的兼容性兜底
iOS Safari 16.6 之前对 filter 的 transition 支持极不稳定，常出现“啪一下就清了”或首帧闪白。这时候别硬扛 transition，改用 @keyframes 更可靠。
- 删掉所有
transition和类切换，改用动画控制：animation: blurToClear 0.6s forwards; -
@keyframes内显式拆解中间帧，比如40% { filter: blur(3px); }，避免纯线性插值带来的视觉突兀 - 如果 JS 控制（如滚动加载后触发），用
element.animate()API 比 class 切换更可控，且能配合requestAnimationFrame节流 - 降级方案：对 iOS 用户检测
navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")，直接跳过 blur，只做opacity渐入
模糊过渡中容易被忽略的渲染细节
即使语法全对，动画仍可能卡顿、边缘锯齿、或首次 hover 延迟——问题往往不在 CSS 写法，而在图层合成策略没对齐。
- 伪元素必须有明确宽高（
top/left/right/bottom: 0或width/height: 100%），否则模糊区域会被裁剪，边缘出现硬边 - 如果父容器设了
overflow: hidden，而伪元素模糊后像素溢出，浏览器会强制重绘，中断过渡；可加transform: translateZ(0)强制新建合成层 - blur 半径超过
6px后性能陡增，尤其在低端安卓机上；建议模糊阶段用blur(4px)，清晰阶段严格归零 - 不要用 CSS 变量驱动 blur（如
filter: blur(var(--b));），transition无法追踪变量变化，只会跳变
真正让模糊过渡“看起来丝滑”的，从来不是多加一个 cubic-bezier，而是确保从 DOM 结构、图层提升到单位一致性，每个环节都没断点。
