使用 transform: scale() 和 filter: blur() 实现平滑过渡需分开声明、显式定义初始状态，transition 写在基础选择器中，避免 all；blur 单位必须为 px；配合 will-change、image-rendering 及 display: block + 固定容器尺寸可防止失真与抖动。
直接用 transform: scale() + filter: blur() 双属性过渡就能实现，但必须分开控制、显式声明起始状态，否则模糊和缩放不同步或移出时突变。
transition 必须写在常态选择器里，且只过渡 transform 和 filter
很多人把 transition 只写在 :hover 里，结果鼠标移出时图片“啪”一下跳回原状——因为浏览器不知道该从哪开始过渡。正确做法是：
-
transition放在基础选择器中，例如.photo或img - 只写
transition: transform 0.3s ease, filter 0.3s ease，避免用all拖慢渲染 - 必须显式定义常态下的
transform: scale(1)和filter: blur(2px)，不能省略
blur() 和 scale() 要独立生效，不能合并进同一个 transform
filter 和 transform 是两个独立的渲染层属性，强行混用会失效。常见错误是试图写成：
transform: scale(1.1) blur(0); /* ❌ 语法错误，blur 不属于 transform */
正确写法是分开声明：
.photo {
transform: scale(1);
filter: blur(2px);
transition: transform 0.3s ease, filter 0.3s ease;
}
.photo:hover {
transform: scale(1.08);
filter: blur(0);
}
注意：blur 值单位必须是 px（如 blur(0)、blur(2px)），不能省略单位，否则无效。
图片模糊后缩放容易边缘发虚，需加 will-change 或 image-rendering
当同时应用 blur() 和 scale() 时，浏览器可能对已模糊的像素再次插值放大，导致边缘糊成一团。缓解方法有：
- 在常态下加
will-change: transform, filter，提前告知浏览器这两个属性将动画 - 对
img元素加image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Chrome/Firefox），抑制过度平滑 - 放大倍数建议 ≤ 1.12，超过 1.15 后 blur + scale 的复合失真明显加剧
父容器 overflow: hidden 不够，要配合 display: block 和宽高约束
仅靠 overflow: hidden 无法完全阻止缩放+模糊组合带来的布局抖动，尤其当 img 是 inline 元素时。必须：
- 给
img加display: block，消除行内元素默认的基线对齐间隙 - 父容器设明确
width/height，并用object-fit: cover控制裁剪方式 - 避免用
max-width: 100%配合scale()—— 缩放会突破 max-width，触发重排
真正稳定的结构是固定尺寸容器包裹 block 状态图片，所有变换都在合成层完成，不触发 layout。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
