提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩，新背景色从四条边向内合拢；指针离开后再重新打开，同时文字颜色随之切换，保持清晰可读：顺滑而迅速。
文字始终位于填充层上方；键盘聚焦时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
Shutter Fill (百叶窗填充)
别称 Shutter
悬停时，背景像百叶窗一样从中间或两边展开或合拢。
适用场景
按钮、卡片
在[应用位置]添加“百叶窗填充”(Shutter Fill)悬停效果，也叫百叶窗(shutter)。
新的背景色从中间一条竖线像百叶窗一样向两侧展开，指针移开后再向中间合拢，同时文字颜色随之切换以保持清晰可读：流畅而迅速。
填充要裁剪在元素内部，文字保持在其上方，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Radial Fill (径向填充)
别称 Circle expand
悬停时一个彩色圆形从中心扩大或向中心收缩，填满元素。
适用场景
按钮
在[应用位置]添加“径向填充”(Radial Fill)悬停效果，也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素，指针离开后再缩回中心，同时文字颜色随之切换，保持清晰可读。
圆形要裁切在元素形状之内，文字位于其上方；键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Background Sweep (背景扫入)
别称 Background Fill, Slide Fill
悬停时，彩色背景从一侧边缘扫过整个元素。
适用场景
按钮、菜单链接
在[应用位置]添加“背景扫入”(Background Sweep)悬停效果，也叫背景填充(background fill)或滑动填充(slide fill)。
新的背景色从左侧边缘扫到右侧，平滑、快速、没有回弹，指针移开时以同样方式退回，同时文字颜色随之切换以保持可读。
让填充始终裁切在元素的形状之内，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
彩色背景从一侧扫入，带有弹性的轻微过冲。
适用场景
按钮
在[应用位置]添加“背景弹性扫入”(Background Bounce Sweep)悬停效果。
新的背景色从一侧扫入，带着弹性稍微越过另一侧边缘后再回落稳定，同时文字颜色随之切换以保持可读；指针移开时平滑地滑出。
让文字始终位于填充层之上，键盘焦点时也显示同样的效果。Hover 中的其他动效
A
将鼠标悬停在上面
悬停时元素旋转几度。
适用场景
图标、缩略图
在[应用位置]添加“旋转”(Rotate)悬停效果。
指针悬停时，元素顺时针轻微转动，指针离开后转回：顺滑而含蓄。
避免周围布局移位；键盘聚焦时也显示同样的效果。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)，则不要播放。