Press (Button Tap Scale) (按压缩放)
别称 Tap feedback, Active scale, Press state
按下时元素略微缩小，松开后带弹性地恢复。
适用场景
按钮、卡片
变体
- whileTap scale
- active:scale-95
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果，也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗，松开后带一点弹跳恢复到原大小：快速、含蓄。
键盘按下和触摸时也显示同样的反馈，并保持周围布局不发生位移。相似的动效
A
将鼠标悬停在上面
元素向内一沉再弹回，仿佛按下了一个实体按钮。
适用场景
按钮
在[应用位置]添加“按压”(Push)悬停效果。
每次指针进入时，元素快速缩小一次再弹回正常大小，就像按下一个实体按钮。
每次悬停只播放一次，不要循环；避免周围布局移位。A
将鼠标悬停在上面
Shrink (缩小)
别称 Scale Down
指针停在元素上时，元素平滑地略微缩小。
适用场景
按钮、磁贴
在[应用位置]添加“缩小”(Shrink)悬停效果，也叫缩小(scale down)。
指针停在元素上时，元素平滑地略微缩小，移开后恢复原来大小：快速而含蓄。
不要让周围的布局发生位移，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Bounce Scale (弹性缩放)
别称 Bounce In / Out
悬停开始或结束时，元素带着弹性过冲进行缩放。
适用场景
按钮、徽章
在[应用位置]添加“弹性缩放”(Bounce Scale)悬停效果，也叫弹入/弹出(bounce in / out)。
元素带着明显的弹性稍微放大，短暂超过最终尺寸后再回稳；指针移开时以同样的弹性缩回。
不要让周围的布局发生位移，键盘焦点时也显示同样的效果。点击试试
Long Press (长按)
别称 Press and hold, Touch and hold
按住元素片刻即可触发额外操作或进度填充。
适用场景
上下文菜单、长按确认
在[应用位置]添加“长按”(Long Press)交互，也叫 press and hold 或 touch and hold。
按住时元素轻微下沉，同时进度填充以稳定的速度扫过它；填满后元素带弹性地回弹并打开菜单，提前松开则取消并重置填充。
为键盘和屏幕阅读器用户提供另一种途径来执行相同操作，并且不要让长按触发文本选择或浏览器自带的右键菜单。Micro-interaction 中的其他动效
拖动试试
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。
每次点击或轻触时，一圈柔和的圆形波纹从按下的确切位置向外扩散，直到覆盖整个元素，边扩散边淡出：快速、轻盈。
波纹要按元素的形状裁切，快速连续按下时每次都产生新的波纹，用键盘按下时从中心开始扩散。Success Checkmark (成功对勾)
别称 Animated success tick
圆圈和对勾自行画出，确认操作已成功。
适用场景
表单提交、支付完成
在[应用位置]添加“成功对勾”(Success Checkmark)动画，也叫 animated success tick。
先用一笔流畅的线条画出圆圈，接着在圆圈内画出对勾，整个图标再轻轻弹一下：沉稳、笃定。
操作成功时只播放一次，配上屏幕阅读器能播报的文字提示；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的图标。