提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果,也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后,就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次,保证色带上的文字清晰可读,并且在语句换成两行时让色带正确跟随。相似的动效
在里面滚动
文字滚动进入视口时,一个指针箭头围绕某个词画出高亮框。
适用场景
标题、营销文案
在[应用位置]添加“指针高亮”(Pointer Highlight)效果。
文字滚动进入视口时,一个方框从左到右围绕关键词画出,同时一个小指针箭头沿着方框的角移动,流畅、匀速,就像有人在用手圈出这个词。
只在第一次进入视口时画一次,不要挤动文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示画好的方框。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)。
指针停在元素上时,一条通宽的线从底边正下方向上滑入到位,移开后再向下滑出视野:快速而流畅。
在边缘处裁剪线条,让它以滑入而不是淡入或伸长的方式出现,键盘焦点时也显示同样的效果。Text 中的其他动效
ABCDABCD
将鼠标悬停在上面
Text Hover Effect (文字悬停效果)
别称 Gradient Outline Text Hover, Text Fill on Hover
描边文字被跟随指针或横扫而过的渐变填充或点亮。
适用场景
大号展示文字、页脚
在[应用位置]添加“文字悬停效果”(Text Hover Effect),也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边;指针停在上面时,实色填充从左到右平滑地扫入,指针移开后再退回去。
填充前的描边文字也要清晰可读,并且在键盘聚焦时呈现同样的效果。在里面滚动
Text Path Scroll (路径文字滚动)
别称 Text Path Curve Scroll Animation
文字沿曲线路径排列,并随用户滚动沿路径移动。
适用场景
叙事型版块
在[应用位置]添加“路径文字滚动”(Text Path Scroll)效果,也叫 text path curve scroll animation。
文字排在一条曲线上,随用户滚动沿曲线滑动:向下滚动时前进,向上滚动时后退。
让移动直接绑定滚动位置、没有延迟,并让屏幕阅读器把它当作普通文本读取。ABCABCABCABCABC
在里面滚动
Text Repetition (文字重复)
别称 Repeated Text Scroll
一个词被复制成许多层叠的副本,随滚动错开移动。
适用场景
作品集标题
在[应用位置]添加“文字重复”(Text Repetition)效果,也叫 repeated text scroll。
把一个词复制成一叠更淡的描边副本,随用户滚动从它身后展开,向上滚动时再收拢回去。
让展开程度直接绑定滚动位置,并对屏幕阅读器隐藏多余的副本,让这个词只被读一次。