必须配合transition才能实现平滑缩放，推荐transition: transform 0.2s ease-in-out;，并设置transform-origin: top left;适配布局，移动端需用JS或:focus-within兜底。
hover时用transform: scale()放大列表项，但别忘了加transition
直接写 transform: scale(1.05) 是没用的，必须配合 transition 才有平滑效果。浏览器默认不启用过渡动画，不加这句就只有“啪”一下跳变，体验很生硬。
- 推荐写法：
transition: transform 0.2s ease-in-out;—— 时间别超过0.3s，否则拖沓；ease-in-out比linear更自然 - 只对
transform做过渡，别写all 0.2s，否则可能意外触发动画其他属性（比如文字模糊、边框抖动） - 如果列表项含图片或字体图标，放大后边缘发虚？那是浏览器用了双线性插值，加
image-rendering: -webkit-optimize-contrast;或will-change: transform;能缓解（后者更通用）
scale放大会导致布局偏移，用transform-origin控制锚点
默认以元素中心缩放，但文章列表通常希望“从左上角原地放大”，否则右边内容会被挤跑，尤其在 flex 或 grid 布局里容易错位。
- 加
transform-origin: top left;可让缩放始终以左上角为基准，避免整体位移 - 如果列表是
display: grid，且设置了grid-gap，scale(1.05)会连 gap 一起放大——这不是 bug，是规范行为；解决办法是把缩放 applied 到子容器（如.item > .content），而非 grid item 本身 - 慎用
scaleZ或 3D transform（如scale3d），部分老安卓 WebView 会触发渲染异常，纯scale()兼容性最好
移动端 hover 不生效？得用:focus-within或JavaScript兜底
手机没有 hover 状态，纯 CSS 的 :hover 在 iOS Safari 和大部分安卓浏览器里只在模拟器或“长按即点击”模式下偶然触发，不能依赖。
- 简单方案：给列表项加
tabindex="0"，再用:focus-within替代:hover（需父容器设该伪类），适合键盘用户和部分触摸反馈场景 - 更可靠的做法：监听
touchstart+touchend，用 JS 切换 class，例如element.classList.add('is-hovered')，然后 CSS 写.item.is-hovered { transform: scale(1.05); } - 别用
:active代替——它只在按下瞬间生效，松手就消失，留不住放大态
放大后文字模糊、图标锯齿？检查是否触发了非整像素渲染
scale(1.05) 会让元素宽高变成小数像素（比如原 200px → 210.5px），浏览器渲染时采样不准，尤其在高清屏上明显。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：强制用整数缩放比，比如
scale(1.1)或scale(1.2)，避开 1.05 这种易出小数的结果 - 根本解法：给缩放容器加
backface-visibility: hidden;或transform: translateZ(0);，强制开启 GPU 加速，多数情况下能改善模糊 - 如果用了 SVG 图标，确保其
viewBox设置合理，不要靠width/height强拉伸，否则 scale 会加倍失真
