MOTION EFFECT
放大镜Lens / Loupe
跟随指针移动的圆形放大镜，圆内显示同一图像被放大的局部。Magic UI 有 Lens 组件，常用于产品截图细节展示。
效果预览
Lens · 放大镜
适合用在哪
设计稿/截图细节展示、材质质感预览、需要「看得更清楚」的图片。移动端不建议使用。
容易踩的坑
- 放大图分辨率与底图相同，镜片内只是被拉糊的像素没有细节。
- 触屏没有 mousemove，必须降级为点击打开大图或灯箱。
- 高清大图在页面加载时就预取，未悬停的用户也要多下载数 MB。
设计提示词 · Prompt
放大镜（Lens / Loupe）：容器放一张底图（截图或纹理），overflow:hidden。::after 是一个 62×62px 的圆形镜片：border 2.5px 白色描边，box-shadow 外层 0 0 0 1px rgba(0,0,0,.12) 与 0 10px 22px -8px rgba(0,0,0,.45)，内层 inset 0 0 22px rgba(255,255,255,.5) 做玻璃反光；镜片的 background 用与底图相同但缩放倍数更大的图像，background-position 由 JS 根据指针位置反向计算。真实实现里镜片跟随 mousemove，镜外其余部分可选加一层浅色压暗。
Lens / Loupe: the container holds a base image (a screenshot or texture) with overflow:hidden. ::after is a 62×62px circular lens: 2.5px white border, box-shadow with an outer 0 0 0 1px rgba(0,0,0,.12) and 0 10px 22px -8px rgba(0,0,0,.45), plus an inner inset 0 0 22px rgba(255,255,255,.5) for glass reflection; the lens background uses the same image as the base at a larger zoom factor, with background-position computed inversely by JS from the pointer position. In a real implementation the lens follows mousemove, and the area outside the lens can optionally get a light dimming layer.
常见搭配
同一页面里经常和「放大镜」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-lens"><span class="m-lens__t">Lens · 放大镜</span></div>