transition必须写在元素的常态样式中，而非:hover伪类里；否则首次悬停无动画，因浏览器无法对“从无过渡到有过渡”插值。
transition 必须写在常态样式里，不能只放 :hover 中
首次悬停没动画？大概率是把 transition 写在了 .img-container:hover img 里。浏览器只在状态变化时应用 transition，而首次 hover 是从“无 transition”到“有 transition”，中间没有过渡过程。
正确做法是把 transition: transform 0.3s ease 直接写在 img 的常态规则中。这样无论是否 hover，过渡能力始终存在，缩放才会平滑。
- 错误写法：
.img-container:hover img { transform: scale(1.8); transition: transform 0.3s ease; } - 正确写法：
img { transition: transform 0.3s ease; } .img-container:hover img { transform: scale(1.8); } - 别偷懒写
transition: all 0.3s—— 它会监听所有可动画属性，可能意外触发布局重排或模糊动画
局部放大必须用容器 + overflow: hidden + transform-origin
纯 scale(1.8) 是全图放大，不是“局部放大镜”。要模拟镜片效果，得让放大的图片只露出一小块区域，这靠三层配合：
- 外层容器设固定宽高 +
overflow: hidden（比如width: 300px; height: 200px;） - 内部
img设display: block（避免 inline 元素默认的底部空白） - 用
transform-origin控制缩放中心点 —— 局部放大的关键就是让缩放原点随鼠标移动，否则永远只放大左上角
注意：transform-origin 接收的是坐标值，不是百分比变量直接拼接。如果要用 JS 动态更新，得通过 style.transformOrigin = x + 'px ' + y + 'px' 设置，CSS 变量无法在 transform-origin 中参与计算。
移动端 hover 失效是常态，别硬扛
iOS Safari 和多数安卓浏览器对 :hover 支持极弱，纯 CSS 局部放大镜在触摸设备上基本不触发。这不是 bug，是规范行为。
- 不要用
@media (hover: hover)做降级判断 —— 安卓 Chrome 常报hover: none却仍响应 hover，逻辑不可靠 - 务实方案只有两个：要么接受“移动端无悬停”，改用点击展开大图；要么放弃纯 CSS，用
touchstart/touchend切换.is-magnified类，再配 JS 更新transform-origin - 如果必须保留悬停视觉反馈，可在移动端 fallback 为轻微
scale(1.05)+box-shadow，至少让用户感知交互发生了
性能和清晰度问题常被忽略
放大后图片边缘发虚、高 DPI 屏幕下细节糊成一片？这不是 transition 没写对，而是渲染层面的问题。
-
scale()放大本质是拉伸像素，原始分辨率不够时必然模糊。解决不了就别强求 —— 尤其是scale(2)以上 - 可尝试加
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制最近邻插值，但兼容性有限 - 真正有效的办法是换资源：用
srcset提供 2x/3x 图片，或直接用 SVG（矢量图放大不糊） - 别在 flex/grid 容器里直接套放大镜 —— 某些浏览器会因缩放触发不必要的 reflow，导致卡顿
局部放大镜看着只是几行 CSS，实际要协调容器裁剪、缩放中心、鼠标定位、资源清晰度、多端适配五件事。少一个环节，效果就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
