提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“上划线生长”(Overline Grow)悬停效果。
指针悬停时,文字上方的线从中间向两侧延伸,指针离开后再缩回中间:快速而顺滑。
预留出线条的空间,避免文字移位;键盘聚焦时也显示同样的效果。相似的动效
ABC DEF
将鼠标悬停在上面
Underline Draw (下划线绘制)
别称 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
悬停时,链接下方的下划线从一侧或中间延伸出来。
适用场景
导航链接、文内链接
在[应用位置]添加“下划线绘制”(Underline Draw)悬停效果,也叫动画下划线(animated underline)或悬停下划线动画(hover underline animation)。
指针停在链接上时,文字下方的下划线从左到右平滑延伸,指针移开后再收回:快速而含蓄。
不要让下划线挤动周围布局,并且在键盘聚焦时呈现同样的效果。ABC
将鼠标悬停在上面
Underline Reveal (下划线显现)
别称 Overline Reveal, Reveal
一条线从底边或顶边滑入到位,为元素加上下划线或上划线。
适用场景
导航链接、按钮
在[应用位置]添加“下划线显现”(Underline Reveal)悬停效果,也叫上划线显现(overline reveal)或显现(reveal)。
指针停在元素上时,一条通宽的线从底边正下方向上滑入到位,移开后再向下滑出视野:快速而流畅。
在边缘处裁剪线条,让它以滑入而不是淡入或伸长的方式出现,键盘焦点时也显示同样的效果。Hover 中的其他动效
A
将鼠标悬停在上面
元素快速放大,再带着弹性“啵”地回到原样。
适用场景
图标、按钮
在[应用位置]添加“弹出”(Pop)悬停效果。
每次指针进入时,元素快速鼓起一次再回到正常大小,像一次带弹性的轻快弹跳。
每次悬停只播放一次,不要停留在放大状态,也不要循环;避免周围布局移位。A
将鼠标悬停在上面
元素向内一沉再弹回,仿佛按下了一个实体按钮。
适用场景
按钮
在[应用位置]添加“按压”(Push)悬停效果。
每次指针进入时,元素快速缩小一次再弹回正常大小,就像按下一个实体按钮。
每次悬停只播放一次,不要循环;避免周围布局移位。A
将鼠标悬停在上面
Radial Fill (径向填充)
别称 Circle expand
悬停时一个彩色圆形从中心扩大或向中心收缩,填满元素。
适用场景
按钮
在[应用位置]添加“径向填充”(Radial Fill)悬停效果,也叫 circle expand。
新颜色的圆形从中心顺滑地扩大直到填满元素,指针离开后再缩回中心,同时文字颜色随之切换,保持清晰可读。
圆形要裁切在元素形状之内,文字位于其上方;键盘聚焦时也显示同样的效果。