提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“弹性缩放”(Bounce Scale)悬停效果,也叫弹入/弹出(bounce in / out)。
元素带着明显的弹性稍微放大,短暂超过最终尺寸后再回稳;指针移开时以同样的弹性缩回。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
元素快速放大,再带着弹性“啵”地回到原样。
适用场景
图标、按钮
在[应用位置]添加“弹出”(Pop)悬停效果。
每次指针进入时,元素快速鼓起一次再回到正常大小,像一次带弹性的轻快弹跳。
每次悬停只播放一次,不要停留在放大状态,也不要循环;避免周围布局移位。A
将鼠标悬停在上面
Grow (放大)
别称 Scale Up, Zoom In on hover
指针停在元素上时,元素平滑地略微放大。
适用场景
按钮、链接、缩略图
在[应用位置]添加“放大”(Grow)悬停效果,也叫放大缩放(scale up)。
指针停在元素上时,元素平滑地略微放大,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
Bounce In (弹跳进入)
别称 Bounce In Down, Bounce In Up
元素以超出后回落的弹跳方式进入,可以是放大出现,也可以从边缘落下。
适用场景
通知徽标、活泼的弹窗
在[应用位置]添加“弹跳进入”(Bounce In)入场动画,也叫 bounce in down 或 bounce in up。
元素从小逐渐放大,略微超过完整尺寸后晃动几下再稳定下来:迅速、有弹性。
只播放一次,以免持续抢夺注意力;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接在原位显示,不做动画。A
点击试试
Press (Button Tap Scale) (按压缩放)
别称 Tap feedback, Active scale, Press state
按下时元素略微缩小,松开后带弹性地恢复。
适用场景
按钮、卡片
在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果,也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗,松开后带一点弹跳恢复到原大小:快速、含蓄。
键盘按下和触摸时也显示同样的反馈,并保持周围布局不发生位移。Hover 中的其他动效
ABCDEF
移动指针试试
Card Hover Effect (卡片悬停高亮)
别称 Sliding highlight card grid
高亮背景在网格中的卡片之间滑动,跟随当前悬停的卡片。
适用场景
卡片网格、功能列表
在[应用位置]添加“卡片悬停高亮”(Card Hover Effect)效果,也叫滑动高亮卡片网格(sliding highlight card grid)。
柔和的高亮背景出现在悬停卡片的后方,指针移到哪张卡片就平滑地滑到哪里,指针离开网格时淡出。
键盘焦点也要以同样方式移动高亮,卡片本身保持不动。A
移动指针试试
Card Spotlight (卡片聚光灯)
别称 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的径向光跟随指针在卡片表面移动,照亮下方的背景。
适用场景
功能卡片、便当网格
在[应用位置]添加“卡片聚光灯”(Card Spotlight)效果,也叫聚光悬停(spotlight hover)、指针光晕(pointer glow)、跟随鼠标的光晕(mouse-following glow)或径向渐变悬停(radial gradient hover)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动,指针移入时淡入,移出时淡出。
光晕放在卡片内容的后面,保证文字清晰可读;在触屏设备上则不显示光晕。A
将鼠标悬停在上面
Curl (卷角)
别称 Page curl
悬停时,元素的一角像翻页一样卷起。
适用场景
卡片、便签
在[应用位置]添加“卷角”(Curl)悬停效果,也叫翻页卷角(page curl)。
元素的一角像翻页一样平滑地卷起,露出折角的背面,指针移开后再恢复平整。
折角要小,不要遮住重要内容,键盘焦点时也显示同样的效果。