提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“滚动字母”(Scrolling Letters)效果,也叫 on-scroll letter animations。
用户滚动经过各章节时,标题的字母从左到右依次滚动到下一个字符,并直接跟随滚动位置变化。
向上滚回时字母要滚回原样,屏幕阅读器要以普通文字获取当前标题。相似的动效
ABCDEF
Split Text Stagger (拆分文字交错)
别称 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
标题被拆分成字符、单词或行,以短暂延迟依次动画入场。
适用场景
大标题、章节标题
在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果,也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母,字母之间留出短暂延迟,依次上移并淡入,快速顺滑,不要有弹跳感。
标题进入视口时只播放一次,让屏幕阅读器把它当作一个完整的词读出;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。ABCDEFGHIJKLMNOPQRSTUVWXYZ
在里面滚动
Text Reveal (文字显现)
别称 Scroll Text Reveal, Word-by-word Reveal
随着用户滚动,段落中的文字从暗淡变为完全不透明。
适用场景
宣言或引言段落
在[应用位置]添加“文字显现”(Text Reveal)效果,也叫滚动文字显现(scroll text reveal)或逐词显现(word-by-word reveal)。
段落起初是暗淡的,随着用户滚动,每个词依次亮到完全清晰,与滚动位置绑定。
向上滚回时文字重新变暗;无论暗淡程度如何,整段文字都要始终能被屏幕阅读器读取。ABCABCABC
在里面滚动
Sliced Text (切片文字)
别称 On-Scroll Sliced Text
标题被切成若干水平切片,页面滚动时切片彼此错开、横向移动。
适用场景
编辑风格的首屏
在[应用位置]添加“切片文字”(Sliced Text)效果,也叫 on-scroll sliced text。
把一个大标题切成若干水平切片,开始时对齐成完整的词,用户滚动时切片彼此错开、横向滑动。
让错位直接跟随滚动位置,往回滚动时随之还原;对屏幕阅读器保持标题为一段完整可读的文字。Text 中的其他动效
ABC DEFGH
Shimmer Text (流光文字)
别称 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
一道亮光反复扫过文字。
适用场景
徽章、公告胶囊标签
在[应用位置]添加“流光文字”(Shimmer Text)效果,也叫 animated shiny text 或金属流光文字(metallic shimmer text)。
一条光带从左到右顺滑地扫过文字,短暂停顿后再重复。
高光经过时文字仍要清晰可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。ABCDEFGHIJKLMNOP
Spinning Text (环形旋转文字)
别称 Circular Text, Text on Circle
文字沿圆周排列,并持续旋转。
适用场景
旋转徽章、印章
在[应用位置]添加“环形旋转文字”(Spinning Text),也叫环形文字(circular text)或 text on circle。
字母沿圆周均匀排列,整个圆缓慢、匀速地旋转,循环重新开始时不能有跳动。
只向屏幕阅读器提供一次普通文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止旋转。