图片hover时filter blur卡顿的解决方法：仅过渡filter属性、启用GPU加速（will-change: filter或transform: translateZ(0)）、默认设轻微模糊（blur(0.2px)）、避免display/visibility突变及overflow干扰。
图片 hover 时用 filter: blur() 配合 transition 出现卡顿、跳变或模糊不自然，核心问题通常不是滤镜本身，而是过渡属性没设对或触发了重排。
只过渡 filter 属性，别让 transition 泛化
常见写法：transition: all 0.3s ease; 看似省事，实则危险——它会试图过渡所有可动画属性（如 width、height、opacity 等），一旦图片尺寸或布局有微小变化，就会干扰 filter 的平滑性，造成“闪”或“顿”。
- ✅ 正确写法：
transition: filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 避免写
transition: all或transition: * 0.3s（星号泛指） - 推荐用缓动函数替代默认
ease，比如上面的贝塞尔曲线更顺滑
确保图片有明确的渲染层（启用 GPU 加速）
blur 是高开销滤镜，纯 CPU 渲染容易掉帧。给图片加 transform: translateZ(0) 或 will-change: filter 可主动提升为合成层，交由 GPU 处理。
- ✅ 推荐组合：
img { will-change: filter; }（hover 前就声明） - 或
img { transform: translateZ(0); }（兼容性更好） - ⚠️ 注意：
will-change别滥用，仅用于真正需要优化的元素
blur 值从 0 开始过渡，避免初始“突兀感”
如果默认状态图片已有模糊（比如父容器用了 backdrop-filter），或 hover 时从 blur(0) → blur(4px) 仍显生硬，可尝试加一层轻微预模糊：
立即学习“前端免费学习笔记（深入）”；
- 默认状态设
filter: blur(0.2px);（人眼几乎不可见） - hover 时变为
filter: blur(3px); - 这样过渡起点不是“绝对清晰”，视觉上更连贯，减少“突然糊掉”的观感
检查是否被其他样式干扰（特别是 display / visibility）
如果 hover 时同时修改了 display、visibility、opacity（未设 transition）、或父级 overflow，都可能中断 filter 过渡流程。
- ✅ 只用
opacity配合 transition 时，务必也写上：transition: filter 0.3s, opacity 0.3s; - 避免在 hover 中切换
display: none ↔ block—— 这会直接销毁/重建元素，transition 失效 - 确保父容器没有
overflow: hidden且尺寸不稳定（如由内容撑开），否则 blur 区域可能被意外裁剪
