提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“按压”(Push)悬停效果。
每次指针进入时,元素快速缩小一次再弹回正常大小,就像按下一个实体按钮。
每次悬停只播放一次,不要循环;避免周围布局移位。相似的动效
A
点击试试
Press (Button Tap Scale) (按压缩放)
别称 Tap feedback, Active scale, Press state
按下时元素略微缩小,松开后带弹性地恢复。
适用场景
按钮、卡片
在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果,也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗,松开后带一点弹跳恢复到原大小:快速、含蓄。
键盘按下和触摸时也显示同样的反馈,并保持周围布局不发生位移。A
将鼠标悬停在上面
悬停时,元素向下移动几个像素,仿佛被按进页面里。
适用场景
按钮
在[应用位置]添加“下沉”(Sink)悬停效果。
指针停在元素上时,元素略微下移并保持住,仿佛被按进页面里,移开后再升回原位:平滑,没有回弹。
只在视觉上移动,不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Shrink (缩小)
别称 Scale Down
指针停在元素上时,元素平滑地略微缩小。
适用场景
按钮、磁贴
在[应用位置]添加“缩小”(Shrink)悬停效果,也叫缩小(scale down)。
指针停在元素上时,元素平滑地略微缩小,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。Hover 中的其他动效
A
将鼠标悬停在上面
Radial Fill (径向填充)
别称 Circle expand
悬停时一个彩色圆形从中心扩大或向中心收缩,填满元素。
适用场景
按钮
在[应用位置]添加“径向填充”(Radial Fill)悬停效果,也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素,指针离开后再缩回中心,同时文字颜色随之切换,保持清晰可读。
圆形要裁切在元素形状之内,文字位于其上方;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
悬停时元素内部的矩形扩大或收缩,从而切换背景。
适用场景
按钮
在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩,新背景色从四条边向内合拢;指针离开后再重新打开,同时文字颜色随之切换,保持清晰可读:顺滑而迅速。
文字始终位于填充层上方;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
悬停时元素旋转几度。
适用场景
图标、缩略图
在[应用位置]添加“旋转”(Rotate)悬停效果。
指针悬停时,元素顺时针轻微转动,指针离开后转回:顺滑而含蓄。
避免周围布局移位;键盘聚焦时也显示同样的效果。