提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“弹出”(Pop)悬停效果。
每次指针进入时,元素快速鼓起一次再回到正常大小,像一次带弹性的轻快弹跳。
每次悬停只播放一次,不要停留在放大状态,也不要循环;避免周围布局移位。相似的动效
A
将鼠标悬停在上面
Bounce Scale (弹性缩放)
别称 Bounce In / Out
悬停开始或结束时,元素带着弹性过冲进行缩放。
适用场景
按钮、徽章
在[应用位置]添加“弹性缩放”(Bounce Scale)悬停效果,也叫弹入/弹出(bounce in / out)。
元素带着明显的弹性稍微放大,短暂超过最终尺寸后再回稳;指针移开时以同样的弹性缩回。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Grow (放大)
别称 Scale Up, Zoom In on hover
指针停在元素上时,元素平滑地略微放大。
适用场景
按钮、链接、缩略图
在[应用位置]添加“放大”(Grow)悬停效果,也叫放大缩放(scale up)。
指针停在元素上时,元素平滑地略微放大,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
Heartbeat (心跳)
别称 Heart Beat
元素以双拍节奏缩放,就像跳动的心脏。
适用场景
点赞和收藏图标、直播状态指示
在[应用位置]添加“心跳”(Heartbeat)效果,也叫 heart beat。
元素要快速地连续膨胀、回缩两次,然后稍作停顿再开始下一次,就像跳动的心脏。
无缝循环播放并保留两次心跳之间的停顿;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止动画。3
Notification Badge Bounce (徽标弹跳)
别称 Badge pop, Badge pulse, Ping
收到新通知时,数字徽标弹出、弹跳或脉动。
适用场景
铃铛图标、收件箱
在[应用位置]添加“徽标弹跳”(Notification Badge Bounce)动画,也叫 badge pop 或 ping。
收到新通知时,数字徽标从无到有地弹出,带着两下快速、有弹性的跳动落定,同时一圈柔和的光环从它向外扩散一次。
每条新通知只播放一次,不要循环,并让屏幕阅读器播报新的数字。Hover 中的其他动效
A
将鼠标悬停在上面
元素向内一沉再弹回,仿佛按下了一个实体按钮。
适用场景
按钮
在[应用位置]添加“按压”(Push)悬停效果。
每次指针进入时,元素快速缩小一次再弹回正常大小,就像按下一个实体按钮。
每次悬停只播放一次,不要循环;避免周围布局移位。A
将鼠标悬停在上面
Radial Fill (径向填充)
别称 Circle expand
悬停时一个彩色圆形从中心扩大或向中心收缩,填满元素。
适用场景
按钮
在[应用位置]添加“径向填充”(Radial Fill)悬停效果,也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素,指针离开后再缩回中心,同时文字颜色随之切换,保持清晰可读。
圆形要裁切在元素形状之内,文字位于其上方;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
悬停时元素内部的矩形扩大或收缩,从而切换背景。
适用场景
按钮
在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩,新背景色从四条边向内合拢;指针离开后再重新打开,同时文字颜色随之切换,保持清晰可读:顺滑而迅速。
文字始终位于填充层上方;键盘聚焦时也显示同样的效果。