提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“交互悬停按钮”(Interactive Hover Button)效果。
文字旁的小圆点扩大直到填满按钮，同时文字向一侧滑出并淡出，带箭头的文字再从新填充色上方滑入：顺滑而迅速。
按钮尺寸保持固定，文字全程清晰可读；键盘聚焦时也显示同样的效果。相似的动效
AB
将鼠标悬停在上面
图标飘出按钮并淡出，同时新图标飘入。
适用场景
图标按钮
在[应用位置]添加“图标飘走”(Icon Float Away)悬停效果。
当前图标向上飘走并淡出，同时新图标从下方飘上来补位，过渡顺滑；指针离开时反向切换回来。
切换过程中按钮尺寸保持固定；键盘聚焦时也显示同样的效果。A
B
移动指针试试
Direction Aware Hover (方向感知悬停)
别称 Direction-aware overlay
遮罩层从指针进入的一侧滑入，并朝指针离开的一侧滑出。
适用场景
图片画廊、作品集网格
在[应用位置]添加“方向感知悬停”(Direction Aware Hover)效果，也叫方向感知遮罩(direction-aware overlay)。
遮罩层从指针进入的那一侧滑入，再朝指针离开的那一侧滑出：快速、顺滑。
根据指针进入和离开时的位置判断方向；触摸或键盘焦点时则统一使用一个默认方向。将鼠标悬停在上面
Nudge Forward / Backward (前后轻推)
别称 Arrow nudge
悬停时箭头或元素本身向前或向后滑动几个像素。
适用场景
下一页/上一页链接、箭头
在[应用位置]添加“前后轻推”(Nudge Forward / Backward)悬停效果，也叫 arrow nudge。
指针悬停时，箭头朝它所指的方向轻轻滑动一小段，指针离开后滑回：快速、幅度小。
只移动箭头，不要让文字或布局跟着偏移；键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Background Sweep (背景扫入)
别称 Background Fill, Slide Fill
悬停时，彩色背景从一侧边缘扫过整个元素。
适用场景
按钮、菜单链接
在[应用位置]添加“背景扫入”(Background Sweep)悬停效果，也叫背景填充(background fill)或滑动填充(slide fill)。
新的背景色从左侧边缘扫到右侧，平滑、快速、没有回弹，指针移开时以同样方式退回，同时文字颜色随之切换以保持可读。
让填充始终裁切在元素的形状之内，键盘焦点时也显示同样的效果。Hover 中的其他动效
A
将鼠标悬停在上面
悬停时轮廓线从元素向外扩展，或向元素收缩。
适用场景
按钮
在[应用位置]添加“轮廓扩展”(Outline Expand)悬停效果。
轮廓线起初紧贴元素边缘，随后向外扩展，在四周留出一小圈间隙，悬停期间保持不变，指针离开后再收回：顺滑而迅速。
绘制轮廓时不要改变元素尺寸，也不要挤动周围内容；键盘聚焦时也显示同样的效果。ABC
将鼠标悬停在上面
悬停时文字上方出现一条线，从左侧、中间或右侧延伸开来。
适用场景
导航链接、标签页
在[应用位置]添加“上划线生长”(Overline Grow)悬停效果。
指针悬停时，文字上方的线从中间向两侧延伸，指针离开后再缩回中间：快速而顺滑。
预留出线条的空间，避免文字移位；键盘聚焦时也显示同样的效果。