Image Reveal Wipe (图片擦除显现)

clip-path 或遮罩从边缘或某一点展开，逐步露出图片或文字。

在[应用位置]添加“裁剪显现”(Clip Reveal)入场效果，也叫 mask reveal、wipe reveal 或 image reveal。
让裁剪边缘从左向右扫过，内容保持不动、逐步显露出来：流畅，开始和结束都要柔和。
从一开始就为元素预留空间，避免布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接完整显示。

遮罩形状划过或跟随指针，露出下方的内容。

在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。

拖动分隔线，一侧显示一张图片，另一侧显示另一张。

在[应用位置]添加“前后对比滑块”(Before-After Slider)，也叫 image comparison slider 或 compare slider。
两张图片上下叠放，拖动一条竖直分隔线时，一张露出更多、另一张露出更少；分隔线紧跟指针，没有延迟。
分隔线初始位于中间，并支持触摸和方向键操作。

实色面板扫过屏幕遮住旧页面，随后收回，露出新页面。

在[应用位置]添加“幕布擦除”(Curtain / Panel Wipe)页面过渡，也叫 page wipe 或 staggered panels。
实色面板依次扫入，遮住旧页面；页面在完全被遮住时切换，然后面板继续移出视野，露出新页面：大胆而流畅。
面板遮住旧页面之前绝不能露出新页面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

静态图片在框内缓慢缩放并平移。

在[应用位置]添加“肯·伯恩斯效果”(Ken Burns Effect)，也叫 slow pan and zoom。
每张图片显示时只朝一个方向非常缓慢地缩放、漂移，然后交叉淡入到下一张，下一张朝另一个方向移动：平静而连续。
让每张图片在任何时刻都铺满整个框，绝不露出边缘；如果用户开启了“减少动态效果”(prefers-reduced-motion)，让图片保持静止。

缩略图从原位置放大，在变暗的背景上居中显示为大图。

在[应用位置]添加“灯箱放大”(Lightbox Zoom)，也叫 image zoom overlay 或 Medium-style zoom。
点击缩略图时，它从原位置平滑放大成居中的大图，背后的页面随之变暗退后；关闭时再缩回原来的位置。
支持按 Esc 或点击背景关闭；打开期间把焦点移到大图视图内，关闭后把焦点还给缩略图。

圆形镜片跟随指针，显示图片局部的放大画面。

在[应用位置]添加“放大镜”(Magnifier Lens)，也叫 lens 或 loupe。
一个圆形镜片无延迟地紧贴在指针正下方，显示其下方那部分图片的放大画面。
放大画面要与指针下的确切位置对齐；在触屏设备上，手指按住图片时显示镜片。