提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“旋转”(Rotate)悬停效果。
指针悬停时,元素顺时针轻微转动,指针离开后转回:顺滑而含蓄。
避免周围布局移位;键盘聚焦时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
悬停时,元素向一侧斜切变形。
适用场景
按钮、标签
在[应用位置]添加“斜切”(Skew)悬停效果。
指针停在元素上时,元素向一侧斜切成轻微倾斜的样子,移开后恢复端正:快速而流畅。
倾斜时文字仍要清晰可读,不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停按钮时,按钮内的图标转动一圈。
适用场景
图标按钮
在[应用位置]添加“图标旋转”(Icon Spin)悬停效果。
指针进入时,元素内的图标顺滑地转一整圈;指针离开时再转回去。
只旋转图标,不旋转整个按钮;键盘聚焦时也显示同样的效果。A
元素像不稳的物体一样,带着倾斜左右摇晃。
适用场景
吸引用户注意图标或按钮
在[应用位置]添加“晃动”(Wobble)提示效果。
元素要带着倾斜左右摇晃,一开始幅度很大,每摆一次就变小,直到停稳。
触发时只播放一次,并避免相邻内容移位。A
元素以顶边为支点,像钟摆一样来回摆动,幅度逐渐减小。
适用场景
悬挂的招牌、通知图标
在[应用位置]添加“摇摆”(Swing)提示效果。
元素要像悬挂的招牌一样来回摆动,一开始摆幅很大,然后很快平息。
以顶边而不是中心为支点摆动,触发时只播放一次。Hover 中的其他动效
A
将鼠标悬停在上面
悬停时,元素的直角平滑地变成圆角。
适用场景
按钮、图片
在[应用位置]添加“圆角化”(Round Corners)悬停效果。
指针停在元素上时,元素的直角平滑地变圆,移开后再恢复成直角:柔和而迅速。
保持元素尺寸不变,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Shine Sweep (扫光)
别称 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
悬停时,一道斜向光带从元素的一侧扫到另一侧。
适用场景
按钮、卡片、徽章
在[应用位置]添加“扫光”(Shine Sweep)悬停效果,也叫光泽(sheen)、闪光按钮(shiny button)、悬停扫光(shine on hover)、闪光(glint)、微光(shimmer)或微光按钮(shimmer button)。
指针停在元素上时,一道柔和的斜向光带从左向右扫过元素,并在短暂停顿后重复。
光带要裁剪在元素内部,指针移开后停止;如果用户开启了“减少动态效果”(prefers-reduced-motion),则不要播放。A
将鼠标悬停在上面
Shrink (缩小)
别称 Scale Down
指针停在元素上时,元素平滑地略微缩小。
适用场景
按钮、磁贴
在[应用位置]添加“缩小”(Shrink)悬停效果,也叫缩小(scale down)。
指针停在元素上时,元素平滑地略微缩小,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。