提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“文字生成”(Text Generate)效果。
文字逐个淡入,同时每个词上的柔和模糊逐渐消散,仿佛文本正在生成:节奏平稳、沉静。
页面加载时只播放一次,让屏幕阅读器立即读到完整文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。相似的动效
ABC DEFG
Typewriter (打字机)
别称 Typing Animation, Typewriter Effect, Typing Text
字符像打字一样逐个出现,通常后面跟着一个闪烁的光标。
适用场景
首屏大标题、标语
在[应用位置]添加“打字机”(Typewriter)效果,也叫打字动画(typing animation)或打字文字(typing text)。
字符以稳定的打字节奏逐个出现,最后一个已输入字符后面紧跟一个光标,打完后闪烁几次。
只播放一次、不要循环,让屏幕阅读器立即读到完整文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示完整文本。ABCDEFGHIJKLMNOPQRSTUVWXYZ
在里面滚动
Text Reveal (文字显现)
别称 Scroll Text Reveal, Word-by-word Reveal
随着用户滚动,段落中的文字从暗淡变为完全不透明。
适用场景
宣言或引言段落
在[应用位置]添加“文字显现”(Text Reveal)效果,也叫滚动文字显现(scroll text reveal)或逐词显现(word-by-word reveal)。
段落起初是暗淡的,随着用户滚动,每个词依次亮到完全清晰,与滚动位置绑定。
向上滚回时文字重新变暗;无论暗淡程度如何,整段文字都要始终能被屏幕阅读器读取。ABCD
Blur In (模糊进入)
别称 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素从严重模糊的状态逐渐变清晰,常伴随滑入或淡入。
适用场景
标题和首屏文字的显现
在[应用位置]添加“模糊进入”(Blur In)入场动画,也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始,在原地逐渐变清晰:柔和、偏慢,没有位移。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示清晰的文字。ABCDEF
Split Text Stagger (拆分文字交错)
别称 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
标题被拆分成字符、单词或行,以短暂延迟依次动画入场。
适用场景
大标题、章节标题
在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果,也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母,字母之间留出短暂延迟,依次上移并淡入,快速顺滑,不要有弹跳感。
标题进入视口时只播放一次,让屏幕阅读器把它当作一个完整的词读出;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。Text 中的其他动效
ABC DEFG HIJ KL
Text Highlighter (荧光笔高亮)
别称 Highlight Marker, Marker Underline, Hero Highlight
一条荧光笔般的色带划过短语,将其突出强调。
适用场景
强调关键语句
在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果,也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后,就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次,保证色带上的文字清晰可读,并且在语句换成两行时让色带正确跟随。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。
文字排在一条曲线上,随用户滚动沿曲线滑动:向下滚动时前进,向上滚动时后退。
让移动直接绑定滚动位置、没有延迟,并让屏幕阅读器把它当作普通文本读取。