提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“背景扫入”(Background Sweep)悬停效果，也叫背景填充(background fill)或滑动填充(slide fill)。
新的背景色从左侧边缘扫到右侧，平滑、快速、没有回弹，指针移开时以同样方式退回，同时文字颜色随之切换以保持可读。
让填充始终裁切在元素的形状之内，键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
彩色背景从一侧扫入，带有弹性的轻微过冲。
适用场景
按钮
在[应用位置]添加“背景弹性扫入”(Background Bounce Sweep)悬停效果。
新的背景色从一侧扫入，带着弹性稍微越过另一侧边缘后再回落稳定，同时文字颜色随之切换以保持可读；指针移开时平滑地滑出。
让文字始终位于填充层之上，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时元素内部的矩形扩大或收缩，从而切换背景。
适用场景
按钮
在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩，新背景色从四条边向内合拢；指针离开后再重新打开，同时文字颜色随之切换，保持清晰可读：顺滑而迅速。
文字始终位于填充层上方；键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Shutter Fill (百叶窗填充)
别称 Shutter
悬停时，背景像百叶窗一样从中间或两边展开或合拢。
适用场景
按钮、卡片
在[应用位置]添加“百叶窗填充”(Shutter Fill)悬停效果，也叫百叶窗(shutter)。
新的背景色从中间一条竖线像百叶窗一样向两侧展开，指针移开后再向中间合拢，同时文字颜色随之切换以保持清晰可读：流畅而迅速。
填充要裁剪在元素内部，文字保持在其上方，键盘焦点时也显示同样的效果。A
B
移动指针试试
Direction Aware Hover (方向感知悬停)
别称 Direction-aware overlay
遮罩层从指针进入的一侧滑入，并朝指针离开的一侧滑出。
适用场景
图片画廊、作品集网格
在[应用位置]添加“方向感知悬停”(Direction Aware Hover)效果，也叫方向感知遮罩(direction-aware overlay)。
遮罩层从指针进入的那一侧滑入，再朝指针离开的那一侧滑出：快速、顺滑。
根据指针进入和离开时的位置判断方向；触摸或键盘焦点时则统一使用一个默认方向。Hover 中的其他动效
A
将鼠标悬停在上面
Bob (上下浮动)
别称 Hang
悬停期间，元素先向上浮起，然后持续上下轻轻浮动。
适用场景
图标、按钮
在[应用位置]添加“上下浮动”(Bob)悬停效果，也叫悬挂(hang)。
元素先轻轻浮起，指针停留期间持续柔和地上下浮动，指针移开后再落回原位：缓慢而柔和。
只在悬停期间循环浮动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。A
将鼠标悬停在上面
悬停时，边框颜色淡入或渐变为新颜色。
适用场景
按钮、输入框
在[应用位置]添加“边框淡变”(Border Fade)悬停效果。
指针停在元素上时，边框从柔和的颜色平滑淡变为强调色：含蓄，不带位移或尺寸变化。
两种状态下的边框宽度保持一致，避免任何错位，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时，同心的边框圆环从元素向外扩散或向内收缩。
适用场景
按钮
在[应用位置]添加“边框波纹”(Border Ripple)悬停效果。
指针移入时，几道边框圆环依次从元素向外扩散并淡出：快速轻盈，像水波一样。
每次悬停只播放一次，不要循环，也不要让圆环挤动周围的布局。