提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“百叶窗填充”(Shutter Fill)悬停效果，也叫百叶窗(shutter)。
新的背景色从中间一条竖线像百叶窗一样向两侧展开，指针移开后再向中间合拢，同时文字颜色随之切换以保持清晰可读：流畅而迅速。
填充要裁剪在元素内部，文字保持在其上方，键盘焦点时也显示同样的效果。相似的动效
A
将鼠标悬停在上面
悬停时元素内部的矩形扩大或收缩，从而切换背景。
适用场景
按钮
在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩，新背景色从四条边向内合拢；指针离开后再重新打开，同时文字颜色随之切换，保持清晰可读：顺滑而迅速。
文字始终位于填充层上方；键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Background Sweep (背景扫入)
别称 Background Fill, Slide Fill
悬停时，彩色背景从一侧边缘扫过整个元素。
适用场景
按钮、菜单链接
在[应用位置]添加“背景扫入”(Background Sweep)悬停效果，也叫背景填充(background fill)或滑动填充(slide fill)。
新的背景色从左侧边缘扫到右侧，平滑、快速、没有回弹，指针移开时以同样方式退回，同时文字颜色随之切换以保持可读。
让填充始终裁切在元素的形状之内，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Radial Fill (径向填充)
别称 Circle expand
悬停时一个彩色圆形从中心扩大或向中心收缩，填满元素。
适用场景
按钮
在[应用位置]添加“径向填充”(Radial Fill)悬停效果，也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素，指针离开后再缩回中心，同时文字颜色随之切换，保持清晰可读。
圆形要裁切在元素形状之内，文字位于其上方；键盘聚焦时也显示同样的效果。A
B
点击试试
Curtain / Panel Wipe (幕布擦除)
别称 Page wipe, Curtain reveal, Stripe transition, Staggered panels
实色面板扫过屏幕遮住旧页面，随后收回，露出新页面。
适用场景
作品集和设计公司网站的页面跳转
在[应用位置]添加“幕布擦除”(Curtain / Panel Wipe)页面过渡，也叫 page wipe 或 staggered panels。
实色面板依次扫入，遮住旧页面；页面在完全被遮住时切换，然后面板继续移出视野，露出新页面：大胆而流畅。
面板遮住旧页面之前绝不能露出新页面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。Hover 中的其他动效
A
将鼠标悬停在上面
悬停时，元素向下移动几个像素，仿佛被按进页面里。
适用场景
按钮
在[应用位置]添加“下沉”(Sink)悬停效果。
指针停在元素上时，元素略微下移并保持住，仿佛被按进页面里，移开后再升回原位：平滑，没有回弹。
只在视觉上移动，不要让周围的布局发生位移，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
悬停时，元素向一侧斜切变形。
适用场景
按钮、标签
在[应用位置]添加“斜切”(Skew)悬停效果。
指针停在元素上时，元素向一侧斜切成轻微倾斜的样子，移开后恢复端正：快速而流畅。
倾斜时文字仍要清晰可读，不要让周围的布局发生位移，键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Speech Bubble (对话气泡)
别称 Bubble
悬停时，元素一侧出现一个对话气泡的小三角。
适用场景
标签页、工具提示
在[应用位置]添加“对话气泡”(Speech Bubble)悬停效果，也叫气泡(bubble)。
一个小三角尾巴从元素一侧的后面滑出，让元素变成对话气泡的形状，指针移开后再滑回去：快速而流畅。
尾巴要和元素同色，看起来是一个整体，键盘焦点时也显示同样的效果。