Before-After Slider (前后对比滑块)
别称 Image comparison slider, Compare slider
拖动分隔线，一侧显示一张图片，另一侧显示另一张。
适用场景
照片修图、产品对比
变体
- horizontal
- vertical
- hover-controlled
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“前后对比滑块”(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)，直接完整显示图片。ABCDEFGHIJKL
移动指针试试
Text Reveal Card (文字显现卡片)
别称 Spotlight Text Reveal
在卡片上移动指针时，遮罩边缘或聚光灯下隐藏的文字随之显露。
适用场景
功能卡片
在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果，也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时，一条竖直边缘紧紧跟随，在一侧露出隐藏的文字：流畅、直接，没有延迟。
在没有指针可跟随的触屏设备上，让拖动或点按也能显示隐藏文字，并让隐藏文字可被屏幕阅读器读取。A
将鼠标悬停在上面
SVG Mask Reveal (SVG遮罩显现)
别称 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形状划过或跟随指针，露出下方的内容。
适用场景
图片和内容显现
在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。A
拖动试试
Drag (拖拽)
别称 Draggable, Drag constraints
拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。
适用场景
滑块、可排序卡片
在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。Image & Media 中的其他动效
将鼠标悬停在上面
Hover Zoom (图片悬停放大)
别称 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
悬停时图片在框内放大，有时还会随指针平移。
适用场景
产品卡片、缩略图
在[应用位置]添加“图片悬停放大”(Hover Zoom)效果，也叫 image zoom on hover 或 zoom-pan。
指针停在图片上时，图片在框内缓慢平滑地放大，框的尺寸保持不变；指针移开后平滑复原。
把图片裁剪在框内，不要溢出布局；键盘焦点时也显示同样的放大效果。Ken Burns Effect (肯·伯恩斯效果)
别称 Slow pan and zoom, Ken Burns, Kenburns
静态图片在框内缓慢缩放并平移。
适用场景
首屏幻灯片、背景
在[应用位置]添加“肯·伯恩斯效果”(Ken Burns Effect)，也叫 slow pan and zoom。
每张图片显示时只朝一个方向非常缓慢地缩放、漂移，然后交叉淡入到下一张，下一张朝另一个方向移动：平静而连续。
让每张图片在任何时刻都铺满整个框，绝不露出边缘；如果用户开启了“减少动态效果”(prefers-reduced-motion)，让图片保持静止。