提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“圆角化”(Round Corners)悬停效果。
指针停在元素上时,元素的直角平滑地变圆,移开后再恢复成直角:柔和而迅速。
保持元素尺寸不变,键盘焦点时也显示同样的效果。相似的动效
Shape Morph (形状变形)
别称 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
一个矢量形状平滑地变成另一个形状。
适用场景
图标状态切换、首屏主视觉
在[应用位置]添加“形状变形”(Shape Morph),也叫路径变形(path morphing)或 SVG morph。
一个形状平滑地变成另一个形状,比如五边形向内收缩成星形,各个点以均匀、从容的节奏滑到位置上。
让两个形状拥有数量相同且一一对应的点,使变形干净、不闪烁;每次状态变化时播放一次,不要循环。Hover 中的其他动效
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)。
指针停在元素上时,元素平滑地略微缩小,移开后恢复原来大小:快速而含蓄。
不要让周围的布局发生位移,键盘焦点时也显示同样的效果。A
将鼠标悬停在上面
Shutter Fill (百叶窗填充)
别称 Shutter
悬停时,背景像百叶窗一样从中间或两边展开或合拢。
适用场景
按钮、卡片
在[应用位置]添加“百叶窗填充”(Shutter Fill)悬停效果,也叫百叶窗(shutter)。
新的背景色从中间一条竖线像百叶窗一样向两侧展开,指针移开后再向中间合拢,同时文字颜色随之切换以保持清晰可读:流畅而迅速。
填充要裁剪在元素内部,文字保持在其上方,键盘焦点时也显示同样的效果。