提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“径向填充”(Radial Fill)悬停效果,也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素,指针离开后再缩回中心,同时文字颜色随之切换,保持清晰可读。
圆形要裁切在元素形状之内,文字位于其上方;键盘聚焦时也显示同样的效果。相似的动效
A
B
点击试试
Circular Reveal (圆形显现)
别称 Clip-path circle expand, Theme toggle reveal
新视图在一个从点击位置向外扩展的圆形中显现。
适用场景
深色/浅色主题切换、页面切换
在[应用位置]添加“圆形显现”(Circular Reveal)过渡,也叫 clip-path circle expand 或 theme toggle reveal。
新视图在一个从被按下的控件处向外扩展的圆形中出现,直到覆盖整个区域:平滑、匀稳,起止都要缓和。
圆形要正好从按下控件的位置开始;如果用户开启了“减少动态效果”(prefers-reduced-motion),则不用圆形,直接切换。点击试试
Ripple (水波纹)
别称 Material ripple, Touch ripple, Ripple Button, Ink ripple
圆形波纹从点击或轻触的确切位置扩散开并淡出。
适用场景
按钮、列表项
在[应用位置]添加“水波纹”(Ripple)效果,也叫 material ripple 或 ink ripple。
每次点击或轻触时,一圈柔和的圆形波纹从按下的确切位置向外扩散,直到覆盖整个元素,边扩散边淡出:快速、轻盈。
波纹要按元素的形状裁切,快速连续按下时每次都产生新的波纹,用键盘按下时从中心开始扩散。A
将鼠标悬停在上面
悬停时元素内部的矩形扩大或收缩,从而切换背景。
适用场景
按钮
在[应用位置]添加“矩形填充”(Rectangle Fill)悬停效果。
随着内部矩形向中心收缩,新背景色从四条边向内合拢;指针离开后再重新打开,同时文字颜色随之切换,保持清晰可读:顺滑而迅速。
文字始终位于填充层上方;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
Shutter Fill (百叶窗填充)
别称 Shutter
悬停时,背景像百叶窗一样从中间或两边展开或合拢。
适用场景
按钮、卡片
在[应用位置]添加“百叶窗填充”(Shutter Fill)悬停效果,也叫百叶窗(shutter)。
新的背景色从中间一条竖线像百叶窗一样向两侧展开,指针移开后再向中间合拢,同时文字颜色随之切换以保持清晰可读:流畅而迅速。
填充要裁剪在元素内部,文字保持在其上方,键盘焦点时也显示同样的效果。Hover 中的其他动效
A
将鼠标悬停在上面
悬停时元素旋转几度。
适用场景
图标、缩略图
在[应用位置]添加“旋转”(Rotate)悬停效果。
指针悬停时,元素顺时针轻微转动,指针离开后转回:顺滑而含蓄。
避免周围布局移位;键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
悬停时,元素的直角平滑地变成圆角。
适用场景
按钮、图片
在[应用位置]添加“圆角化”(Round Corners)悬停效果。
指针停在元素上时,元素的直角平滑地变圆,移开后再恢复成直角:柔和而迅速。
保持元素尺寸不变,键盘焦点时也显示同样的效果。