SVG Mask Reveal (SVG遮罩显现)
别称 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形状划过或跟随指针，露出下方的内容。
适用场景
图片和内容显现
变体
- circle follows cursor
- clip-path inset wipe
- SVG clipPath animation
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。相似的动效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移动指针试试
Cursor Spotlight (光标聚光灯)
别称 Flashlight cursor, Spotlight effect
指针周围的一圈光照亮内容，其余部分保持暗色。
适用场景
首屏大图区、揭示效果
在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果，也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针，照亮下方的内容，区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针，改为直接完整点亮显示内容。ABCDEFGHIJKL
移动指针试试
Text Reveal Card (文字显现卡片)
别称 Spotlight Text Reveal
在卡片上移动指针时，遮罩边缘或聚光灯下隐藏的文字随之显露。
适用场景
功能卡片
在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果，也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时，一条竖直边缘紧紧跟随，在一侧露出隐藏的文字：流畅、直接，没有延迟。
在没有指针可跟随的触屏设备上，让拖动或点按也能显示隐藏文字，并让隐藏文字可被屏幕阅读器读取。A
Clip Reveal (裁剪显现)
别称 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path 或遮罩从边缘或某一点展开，逐步露出图片或文字。
适用场景
图片和标题的显现
在[应用位置]添加“裁剪显现”(Clip Reveal)入场效果，也叫 mask reveal、wipe reveal 或 image reveal。
让裁剪边缘从左向右扫过，内容保持不动、逐步显露出来：流畅，开始和结束都要柔和。
从一开始就为元素预留空间，避免布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接完整显示。在里面滚动
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)，直接完整显示图片。SVG & Shape 中的其他动效
Blob Morph (液态变形)
别称 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
一团有机形状持续不断地改变自身轮廓。
适用场景
背景、头像和按钮
在[应用位置]添加“液态变形”(Blob Morph)循环动画，也叫 morphing blob 或 animated blob。
一团有机形状一边缓缓转动，一边不停地慢慢改变轮廓：流畅柔和，没有尖角。
循环要无缝衔接，形状不能跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。将鼠标悬停在上面
Gooey Effect (粘滞融合)
别称 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
借助模糊与对比度滤镜，相邻的形状像液滴一样相互融合。
适用场景
菜单、光标和分页
在[应用位置]添加“粘滞融合”(Gooey Effect)效果，也叫 goo effect 或元球(metaballs)。
指针悬停时，小液滴像液体一样从主体上拉长后脱离；指针移开后，它们流回来并平滑地融合在一起。
模糊加对比度滤镜只作用于这一小组形状，不要作用于整个页面；键盘聚焦和点按时也显示同样的效果。点击试试
Icon Morph (图标变形)
别称 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
汉堡菜单等图标通过线条的旋转和移动变成另一个图标（X）。
适用场景
菜单开关按钮
在[应用位置]添加“图标变形”(Icon Morph)，也叫汉堡变 X(hamburger to X)或 menu icon morph。
每次按下时，上下两条线先一起滑到中间，再旋转成 X，中间那条线同时淡出；再按一次则反向还原：干脆利落。
做成真正的切换按钮，无障碍标签和展开状态随之变化；图标尺寸保持固定，周围内容不发生位移。