Pointer Highlight (指针高亮)
文字滚动进入视口时，一个指针箭头围绕某个词画出高亮框。
适用场景
标题、营销文案
变体
- Pointer Highlight
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“指针高亮”(Pointer Highlight)效果。
文字滚动进入视口时，一个方框从左到右围绕关键词画出，同时一个小指针箭头沿着方框的角移动，流畅、匀速，就像有人在用手圈出这个词。
只在第一次进入视口时画一次，不要挤动文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的方框。相似的动效
ABC DEFG HIJ KL
Text Highlighter (荧光笔高亮)
别称 Highlight Marker, Marker Underline, Hero Highlight
一条荧光笔般的色带划过短语，将其突出强调。
适用场景
强调关键语句
在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果，也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后，就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次，保证色带上的文字清晰可读，并且在语句换成两行时让色带正确跟随。ABC DEF
将鼠标悬停在上面
Underline Draw (下划线绘制)
别称 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
悬停时，链接下方的下划线从一侧或中间延伸出来。
适用场景
导航链接、文内链接
在[应用位置]添加“下划线绘制”(Underline Draw)悬停效果，也叫动画下划线(animated underline)或悬停下划线动画(hover underline animation)。
指针停在链接上时，文字下方的下划线从左到右平滑延伸，指针移开后再收回：快速而含蓄。
不要让下划线挤动周围布局，并且在键盘聚焦时呈现同样的效果。Line Drawing (线条绘制)
别称 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。
适用场景
图标、Logo 和插画
在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。Micro-interaction 中的其他动效
A
点击试试
Press (Button Tap Scale) (按压缩放)
别称 Tap feedback, Active scale, Press state
按下时元素略微缩小，松开后带弹性地恢复。
适用场景
按钮、卡片
在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果，也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗，松开后带一点弹跳恢复到原大小：快速、含蓄。
键盘按下和触摸时也显示同样的反馈，并保持周围布局不发生位移。拖动试试
Pull to Refresh (下拉刷新)
别称 Swipe to refresh
向下拖动列表会露出加载图标，松开后重新加载内容。
适用场景
信息流、收件箱
在[应用位置]添加“下拉刷新”(Pull to Refresh)交互，也叫 swipe to refresh。
从顶部向下拉列表时，列表带着一点阻力跟随手指，并露出一个随拉动旋转的加载图标；松开后加载图标在内容重新加载期间持续旋转，完成后列表平滑地收回顶部。
只在列表已经滚动到顶部时才触发，并为键盘和屏幕阅读器用户另外提供一个普通的刷新按钮。点击试试
Ripple (水波纹)
别称 Material ripple, Touch ripple, Ripple Button, Ink ripple
圆形波纹从点击或轻触的确切位置扩散开并淡出。
适用场景
按钮、列表项
在[应用位置]添加“水波纹”(Ripple)效果，也叫 material ripple 或 ink ripple。
每次点击或轻触时，一圈柔和的圆形波纹从按下的确切位置向外扩散，直到覆盖整个元素，边扩散边淡出：快速、轻盈。
波纹要按元素的形状裁切，快速连续按下时每次都产生新的波纹，用键盘按下时从中心开始扩散。