提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“文字乱码解码”(Text Scramble)悬停效果,也叫文字解码(text decode)或加密文字(encrypted text)。
指针移到文字上时,每个字母快速闪过随机字符,再从左到右依次定格为真实字母。
乱码过程中文字宽度不要跳动,让屏幕阅读器始终读取真实文本,并且在键盘聚焦时呈现同样的效果。相似的动效
ABC DEFG
Typewriter (打字机)
别称 Typing Animation, Typewriter Effect, Typing Text
字符像打字一样逐个出现,通常后面跟着一个闪烁的光标。
适用场景
首屏大标题、标语
在[应用位置]添加“打字机”(Typewriter)效果,也叫打字动画(typing animation)或打字文字(typing text)。
字符以稳定的打字节奏逐个出现,最后一个已输入字符后面紧跟一个光标,打完后闪烁几次。
只播放一次、不要循环,让屏幕阅读器立即读到完整文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示完整文本。ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
别称 Text Generate Effect
页面加载时,文字逐个淡入,常伴随模糊逐渐消散,仿佛正在生成。
适用场景
AI 风格的开场文案
在[应用位置]添加“文字生成”(Text Generate)效果。
文字逐个淡入,同时每个词上的柔和模糊逐渐消散,仿佛文本正在生成:节奏平稳、沉静。
页面加载时只播放一次,让屏幕阅读器立即读到完整文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (翻牌文字)
别称 Text Flipping Board, Flip Board, Vestaboard display
字符像机场航班显示牌一样翻动,直到停在目标字母上。
适用场景
状态看板、复古显示屏
在[应用位置]添加“翻牌文字”(Split-Flap Text)效果,也叫翻牌板(text flipping board 或 flip board)。
每个字符格快速翻过字母表,直到停在目标字母上,各字符格从左到右依次停稳。
每次文字出现或变化时运行一次,只向屏幕阅读器播报最终文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),就不翻动,直接显示最终文字。ABCDEF
将鼠标悬停在上面
Glitch Text (故障文字)
别称 Text Glitch, RGB Split Glitch
文字像信号故障一样抖动,出现切片错位和红青色分离。
适用场景
赛博朋克或游戏风格标题
在[应用位置]添加“故障文字”(Glitch Text)悬停效果,也叫 text glitch 或 RGB 分离故障(RGB split glitch)。
指针停在文字上时,文字以快速、利落的阵发方式抖动:细细的横向切片左右跳动,两份彩色副本像信号故障一样错开;指针移开后恢复原状。
真实文字在文档中只保留一份,避免屏幕阅读器读出副本;键盘聚焦时也显示同样的效果。Text 中的其他动效
ABCDEF
移动指针试试
Text Tilt (文字倾斜)
别称 Perspective Text Tilt
文字跟随鼠标位置以 3D 透视方式倾斜转动。
适用场景
首屏标题
在[应用位置]添加“文字倾斜”(Text Tilt)效果,也叫透视文字倾斜(perspective text tilt)。
文字随着指针移动平滑跟随,以 3D 方式轻轻朝指针倾斜,指针移开后再缓缓恢复平整。
倾斜幅度要含蓄,保证文字可读;在触屏设备上,以及如果用户开启了“减少动态效果”(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)。
指针停在链接上时,文字下方的下划线从左到右平滑延伸,指针移开后再收回:快速而含蓄。
不要让下划线挤动周围布局,并且在键盘聚焦时呈现同样的效果。