Text

文字以渐变填充，颜色持续变换或流动。

在[应用位置]添加“动态渐变文字”(Animated Gradient Text)效果，也叫极光文字(aurora text)或 rainbow text sweep。
文字用渐变填充，颜色在文字上缓慢、顺滑地流动，无缝地无限循环。
任何时刻文字都要在背景上清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让颜色保持静止。

文字像信号故障一样抖动，出现切片错位和红青色分离。

在[应用位置]添加“故障文字”(Glitch Text)悬停效果，也叫 text glitch 或 RGB 分离故障(RGB split glitch)。
指针停在文字上时，文字以快速、利落的阵发方式抖动：细细的横向切片左右跳动，两份彩色副本像信号故障一样错开；指针移开后恢复原状。
真实文字在文档中只保留一份，避免屏幕阅读器读出副本；键盘聚焦时也显示同样的效果。

文字呈现流转的彩虹箔片反光，随指针或时间移动。

在[应用位置]添加“全息文字”(Holographic Text)悬停效果，也叫全息箔片文字(holographic foil text)。
指针停在文字上时，一道箔片般的彩色光带在字母上缓慢、顺滑地来回滑动；指针移开后，文字恢复原本的朴素样子。
光泽流动的任何时刻文字都要清晰可读；键盘聚焦时也显示同样的效果。

文字不再是静态文案，而是作为运动的图形元素缩放、移动或旋转。

在[应用位置]添加“动态排版”(Kinetic Typography)，也叫 kinetic text。
一行行重复的大号文字以缓慢、稳定的节奏交替朝相反方向横向滑动，让文字本身变成运动的图形。
每一行都要无缝循环、看不出跳接，屏幕阅读器只读一遍文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止运动。

悬停时字母四散飞开再归位，或在入场时向外迸散。

在[应用位置]添加“文字飞散”(Letter Scatter)悬停效果，也叫 scatter gather letters 或 explosive letter burst。
指针移到文字上时，每个字母带着一点旋转朝各自方向飞出一小段；指针移开后再顺滑地聚拢回原来的单词。
字母移动时，单词在布局中占的位置保持不变，屏幕阅读器要把它当作一个词来读；键盘聚焦时也显示同样的效果。

字母后方的条纹或错位阴影朝一个方向移动。

在[应用位置]添加“线条阴影文字”(Line Shadow Text)效果，也叫 text shadow animation 或 dancing shadow。
字母后方由细斜条纹组成的错位阴影缓慢、持续地滑动，字母本身保持静止、清晰。
条纹的移动要无缝循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让阴影保持静止。

字母中注入不断上升、起伏荡漾的液体。

在[应用位置]添加“液体填充文字”(Liquid Fill Text)效果，也叫 water fill text。
描边的字母中注满液体，波浪状的液面横向翻滚，液位缓慢地起伏，形成柔和、连续的循环。
单词要保留为真实文本供屏幕阅读器读取；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让液体停在一个静止的液位。

文字从一条裁切线后方向上滑出，仿佛凭空出现。

在[应用位置]添加“遮罩显现”(Mask Reveal)文字入场效果，也叫行遮罩显现(line mask reveal)或文字遮罩(text masking)。
每一行文字从一条看不见的边缘后方向上滑出，仿佛凭空出现，一行接一行，快速顺滑，不要有弹跳感。
文字滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示文字，不做动画。

绿色字符像《黑客帝国》里的代码雨一样成列落下。

在[应用位置]添加“数字雨文字”(Matrix Text)效果，也叫 digital rain text。
一列列字符以略有差异的速度稳定落下，每列最前面的字符明亮，后面拖着逐渐淡去的尾迹。
把它当作对屏幕阅读器隐藏的装饰，保持轻量；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止动画。

字母向下滴落、拉长，仿佛正在融化。

在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷，下方拉出滴落的液滴，仿佛正在融化，最后停在静止的融化形态。
文字进入视口时只播放一次，结束时保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不做动画。

一个词在同一位置模糊并融合成下一个词。

在[应用位置]添加“文字变形”(Morphing Text)效果，也叫 text morph。
一个词在同一位置变模糊，以柔和、黏稠的方式融合成下一个词，然后停留片刻再进行下一次切换。
词语之间无缝循环，让屏幕阅读器把这些词当作普通文字读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止循环。

文字像霓虹灯管一样发光，并闪烁或脉动。

在[应用位置]添加“霓虹发光文字”(Neon Glow Text)效果，也叫霓虹招牌闪烁(neon sign flicker)或发光文字(glowing text)。
文字像霓虹灯管一样发出柔和、稳定的光，偶尔像真实招牌那样短暂熄灭一下。
闪烁要偶尔出现而不是快速连闪，因为快速闪光可能伤害部分用户；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持稳定发光。

用户滚动经过各个章节时，标题的字母依次变换或移动。

在[应用位置]添加“滚动字母”(Scrolling Letters)效果，也叫 on-scroll letter animations。
用户滚动经过各章节时，标题的字母从左到右依次滚动到下一个字符，并直接跟随滚动位置变化。
向上滚回时字母要滚回原样，屏幕阅读器要以普通文字获取当前标题。

一道亮光反复扫过文字。

在[应用位置]添加“流光文字”(Shimmer Text)效果，也叫 animated shiny text 或金属流光文字(metallic shimmer text)。
一条光带从左到右顺滑地扫过文字，短暂停顿后再重复。
高光经过时文字仍要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。

标题被切成若干水平切片，页面滚动时切片彼此错开、横向移动。

在[应用位置]添加“切片文字”(Sliced Text)效果，也叫 on-scroll sliced text。
把一个大标题切成若干水平切片，开始时对齐成完整的词，用户滚动时切片彼此错开、横向滑动。
让错位直接跟随滚动位置，往回滚动时随之还原；对屏幕阅读器保持标题为一段完整可读的文字。

文字沿圆周排列，并持续旋转。

在[应用位置]添加“环形旋转文字”(Spinning Text)，也叫环形文字(circular text)或 text on circle。
字母沿圆周均匀排列，整个圆缓慢、匀速地旋转，循环重新开始时不能有跳动。
只向屏幕阅读器提供一次普通文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。

标题被拆分成字符、单词或行，以短暂延迟依次动画入场。

在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果，也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母，字母之间留出短暂延迟，依次上移并淡入，快速顺滑，不要有弹跳感。
标题进入视口时只播放一次，让屏幕阅读器把它当作一个完整的词读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

字符像机场航班显示牌一样翻动，直到停在目标字母上。

在[应用位置]添加“翻牌文字”(Split-Flap Text)效果，也叫翻牌板(text flipping board 或 flip board)。
每个字符格快速翻过字母表，直到停在目标字母上，各字符格从左到右依次停稳。
每次文字出现或变化时运行一次，只向屏幕阅读器播报最终文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不翻动，直接显示最终文字。

借助 SVG 置换滤镜，字母边缘像手绘一样抖动。

在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果，也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动，就像每秒被手工重画好几次：是含蓄、细碎的抖动，而不是顺滑的波浪。
保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。

文字固定不动，各行随滚动进度淡入淡出。

在[应用位置]添加“吸顶文字淡入淡出”(Sticky Text Fade)效果，也叫 sticky scroll text opacity fade。
该区块滚动期间，文字块固定在原位，各行随滚动进度逐行淡入淡出。
让淡入淡出直接跟随滚动位置，往回滚动时随之反转；无论透明度如何，每一行都要能被屏幕阅读器读到。

先以描边绘出字母轮廓，再显示填充。

在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果，也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出，轮廓完成后填充再淡入。
页面加载时只播放一次，让文字保持为可访问的真实文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已填充的文字。

字母或单词绕轴做 3D 翻转，露出背面的下一段文字。

在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果，也叫 3D flip text reveal。
指针移到文字上时，每个字母绕水平轴做 3D 翻转，露出另一面的新字母，一个接一个快速顺滑地扫过；指针移开时再翻回来。
翻转过程中保持文本框尺寸不变，键盘聚焦时也显示同样的效果。

文字随滚动或指针移动自然地扭曲、起伏。

在[应用位置]添加“文字扭曲”(Text Distortion)效果，也叫 organic text distortion。
一行文字不断横向流动，同时自然地扭曲、起伏，仿佛隔着流动的水去看，流动由用户的滚动驱动。
扭曲要足够轻，保证文字可读，在较慢的设备上也要流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭该效果。

页面加载时，文字逐个淡入，常伴随模糊逐渐消散，仿佛正在生成。

在[应用位置]添加“文字生成”(Text Generate)效果。
文字逐个淡入，同时每个词上的柔和模糊逐渐消散，仿佛文本正在生成：节奏平稳、沉静。
页面加载时只播放一次，让屏幕阅读器立即读到完整文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。

一条荧光笔般的色带划过短语，将其突出强调。

在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果，也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后，就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次，保证色带上的文字清晰可读，并且在语句换成两行时让色带正确跟随。

描边文字被跟随指针或横扫而过的渐变填充或点亮。

在[应用位置]添加“文字悬停效果”(Text Hover Effect)，也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边；指针停在上面时，实色填充从左到右平滑地扫入，指针移开后再退回去。
填充前的描边文字也要清晰可读，并且在键盘聚焦时呈现同样的效果。

文字沿曲线路径排列，并随用户滚动沿路径移动。

在[应用位置]添加“路径文字滚动”(Text Path Scroll)效果，也叫 text path curve scroll animation。
文字排在一条曲线上，随用户滚动沿曲线滑动：向下滚动时前进，向上滚动时后退。
让移动直接绑定滚动位置、没有延迟，并让屏幕阅读器把它当作普通文本读取。

一个词被复制成许多层叠的副本，随滚动错开移动。

在[应用位置]添加“文字重复”(Text Repetition)效果，也叫 repeated text scroll。
把一个词复制成一叠更淡的描边副本，随用户滚动从它身后展开，向上滚动时再收拢回去。
让展开程度直接绑定滚动位置，并对屏幕阅读器隐藏多余的副本，让这个词只被读一次。

原有文字以动画方式退出，并被新的文字内容替换。

在[应用位置]添加“文字替换”(Text Replacement)效果，也叫文字切换(text swap)。
文字变化时，旧字符向上滑出，新字符从下方滑入，逐个字符形成快速而流畅的波动。
切换过程中不要让文本框尺寸跳动，并且只向屏幕阅读器播报新文本。

随着用户滚动，段落中的文字从暗淡变为完全不透明。

在[应用位置]添加“文字显现”(Text Reveal)效果，也叫滚动文字显现(scroll text reveal)或逐词显现(word-by-word reveal)。
段落起初是暗淡的，随着用户滚动，每个词依次亮到完全清晰，与滚动位置绑定。
向上滚回时文字重新变暗；无论暗淡程度如何，整段文字都要始终能被屏幕阅读器读取。

在卡片上移动指针时，遮罩边缘或聚光灯下隐藏的文字随之显露。

在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果，也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时，一条竖直边缘紧紧跟随，在一侧露出隐藏的文字：流畅、直接，没有延迟。
在没有指针可跟随的触屏设备上，让拖动或点按也能显示隐藏文字，并让隐藏文字可被屏幕阅读器读取。

文字被不断刷新的随机字符替代，并逐渐还原成最终的词。

在[应用位置]添加“文字乱码解码”(Text Scramble)悬停效果，也叫文字解码(text decode)或加密文字(encrypted text)。
指针移到文字上时，每个字母快速闪过随机字符，再从左到右依次定格为真实字母。
乱码过程中文字宽度不要跳动，让屏幕阅读器始终读取真实文本，并且在键盘聚焦时呈现同样的效果。

文字跟随鼠标位置以 3D 透视方式倾斜转动。

在[应用位置]添加“文字倾斜”(Text Tilt)效果，也叫透视文字倾斜(perspective text tilt)。
文字随着指针移动平滑跟随，以 3D 方式轻轻朝指针倾斜，指针移开后再缓缓恢复平整。
倾斜幅度要含蓄，保证文字可读；在触屏设备上，以及如果用户开启了“减少动态效果”(prefers-reduced-motion)，文字保持平整不动。

字符像打字一样逐个出现，通常后面跟着一个闪烁的光标。

在[应用位置]添加“打字机”(Typewriter)效果，也叫打字动画(typing animation)或打字文字(typing text)。
字符以稳定的打字节奏逐个出现，最后一个已输入字符后面紧跟一个光标，打完后闪烁几次。
只播放一次、不要循环，让屏幕阅读器立即读到完整文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示完整文本。

悬停时，链接下方的下划线从一侧或中间延伸出来。

在[应用位置]添加“下划线绘制”(Underline Draw)悬停效果，也叫动画下划线(animated underline)或悬停下划线动画(hover underline animation)。
指针停在链接上时，文字下方的下划线从左到右平滑延伸，指针移开后再收回：快速而含蓄。
不要让下划线挤动周围布局，并且在键盘聚焦时呈现同样的效果。

借助可变字体的轴，字母平滑地变粗或变细（或改变宽度、倾斜度）。

在[应用位置]添加“可变字重动画”(Variable Font Weight Animation)悬停效果，也叫字重切换(font weight shift)。
指针停在文字上时，字母从左到右依次变粗，形成一道流畅的波浪；指针移开后再变细。
使用可变字体，让字重平滑变化而不是跳变；标题变宽时不要挤动附近内容，并且在键盘聚焦时呈现同样的效果。

大号字母如同窗口，里面显示正在播放的视频。

在[应用位置]添加“视频文字”(Video Text)效果，也叫文字视频遮罩(text video mask)。
让粗大的字母成为观看正在播放视频的窗口，动态画面只在字母形状内显示。
视频保持静音、循环播放且不显示控件，为屏幕阅读器提供真实的文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示一帧静止画面。

字母依次上下起伏，在整个词中形成流动的波浪。

在[应用位置]添加“波浪文字”(Wavy Text)效果，也叫文字波浪(text wave)。
字母依次上下起伏，让一道轻柔流畅的波浪不断穿过整个词。
无缝循环，让屏幕阅读器把它读作一个词；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止波浪。

句子中的一个词以滑动、翻转或淡入淡出的方式换成列表中的下一个词。

在[应用位置]添加“词语轮播”(Word Rotate)效果，也叫轮换词(rotating words)或翻转词(flip words)。
行内的一个词向上滑出，列表中的下一个词从下方滑入，每个词停留片刻后再切换。
词宽不同时不要让这一行的其余部分跳动，不要让屏幕阅读器播报每次切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止轮播。