Magnifier Lens (放大镜)
别称 Lens, Loupe, Lens (Magnifier), Hover zoom lens
圆形镜片跟随指针，显示图片局部的放大画面。
适用场景
商品详情图
变体
- Lens
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“放大镜”(Magnifier Lens)，也叫 lens 或 loupe。
一个圆形镜片无延迟地紧贴在指针正下方，显示其下方那部分图片的放大画面。
放大画面要与指针下的确切位置对齐；在触屏设备上，手指按住图片时显示镜片。相似的动效
将鼠标悬停在上面
Hover Zoom (图片悬停放大)
别称 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
悬停时图片在框内放大，有时还会随指针平移。
适用场景
产品卡片、缩略图
在[应用位置]添加“图片悬停放大”(Hover Zoom)效果，也叫 image zoom on hover 或 zoom-pan。
指针停在图片上时，图片在框内缓慢平滑地放大，框的尺寸保持不变；指针移开后平滑复原。
把图片裁剪在框内，不要溢出布局；键盘焦点时也显示同样的放大效果。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移动指针试试
Cursor Spotlight (光标聚光灯)
别称 Flashlight cursor, Spotlight effect
指针周围的一圈光照亮内容，其余部分保持暗色。
适用场景
首屏大图区、揭示效果
在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果，也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针，照亮下方的内容，区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针，改为直接完整点亮显示内容。- A
- B
- C
- D
ABCD
移动指针试试
Cursor Image Hover (悬停图片跟随)
别称 Hover image follow, Image preview on hover
悬停在文字列表项上时，一张预览图片跟随指针移动。
适用场景
项目列表、菜单
在[应用位置]添加“悬停图片跟随”(Cursor Image Hover)效果，也叫 hover image follow 或悬停图片预览(image preview on hover)。
指针停在文字列表项上时，该项的一张小预览图浮在指针旁边，带着轻微、流畅的延迟跟随指针；指针移到另一项时，预览图滑动切换到下一张。
预览图绝不能挡住列表的点击；在触屏和键盘操作下，即使没有预览图，列表也要完全可用。Image & Media 中的其他动效
A
B
拖动试试
Before-After Slider (前后对比滑块)
别称 Image comparison slider, Compare slider
拖动分隔线，一侧显示一张图片，另一侧显示另一张。
适用场景
照片修图、产品对比
在[应用位置]添加“前后对比滑块”(Before-After Slider)，也叫 image comparison slider 或 compare slider。
两张图片上下叠放，拖动一条竖直分隔线时，一张露出更多、另一张露出更少；分隔线紧跟指针，没有延迟。
分隔线初始位于中间，并支持触摸和方向键操作。在里面滚动
Image Reveal Wipe (图片擦除显现)
别称 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
遮罩收缩或蒙版边缘扩展，逐渐露出图片。
适用场景
滚动时出现的编辑类配图
在[应用位置]添加“图片擦除显现”(Image Reveal Wipe)，也叫 mask reveal 或 clip-path reveal。
图片滚动进入视口时，遮罩从一侧擦除，随滚动进度平滑地露出图片，并在图片离开屏幕之前早早完全展开。
预留图片所占空间，避免布局跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，直接完整显示图片。