提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“翻牌文字”(Split-Flap Text)效果，也叫翻牌板(text flipping board 或 flip board)。
每个字符格快速翻过字母表，直到停在目标字母上，各字符格从左到右依次停稳。
每次文字出现或变化时运行一次，只向屏幕阅读器播报最终文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不翻动，直接显示最终文字。相似的动效
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (数字滚轮)
别称 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
数字变化时，每一位都纵向滚动到新的值。
适用场景
实时计数器、价格
在[应用位置]添加“数字滚轮”(Odometer)数字动画，也叫 rolling numbers 或老虎机数字(slot-machine digits)。
数值变化时，每一位都纵向滚动到新的数字，始终向前滚动，各位之间略有错开，结尾有轻微的回稳。
让每一位数字宽度相同，避免整个数字位移；只向屏幕阅读器提供最终数值。A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
将鼠标悬停在上面
Text Scramble (文字乱码解码)
别称 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
文字被不断刷新的随机字符替代，并逐渐还原成最终的词。
适用场景
科技风首屏标题、链接悬停
在[应用位置]添加“文字乱码解码”(Text Scramble)悬停效果，也叫文字解码(text decode)或加密文字(encrypted text)。
指针移到文字上时，每个字母快速闪过随机字符，再从左到右依次定格为真实字母。
乱码过程中文字宽度不要跳动，让屏幕阅读器始终读取真实文本，并且在键盘聚焦时呈现同样的效果。AGBHCIDJEKFL
将鼠标悬停在上面
Text 3D Flip (文字3D翻转)
别称 3D Flip Text Reveal
字母或单词绕轴做 3D 翻转，露出背面的下一段文字。
适用场景
悬停链接、标题
在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果，也叫 3D flip text reveal。
指针移到文字上时，每个字母绕水平轴做 3D 翻转，露出另一面的新字母，一个接一个快速顺滑地扫过；指针移开时再翻回来。
翻转过程中保持文本框尺寸不变，键盘聚焦时也显示同样的效果。- %
Number Ticker (数字递增)
别称 Count Up, Animated Counter, Number Counter, countUp
数字进入可见区域时，从起始值计数到目标值。
适用场景
统计数据、KPI 模块
在[应用位置]添加“数字递增”(Number Ticker)，也叫 count up 或 animated counter。
数字进入视口时，从零计数到目标值，开始时快，接近终点时柔和地放慢。
使用等宽数字，避免周围内容抖动；只计数一次；对屏幕阅读器以及开启了“减少动态效果”(prefers-reduced-motion)的用户，直接给出最终数值。Text 中的其他动效
ABCDEF
Squiggly Text (手绘抖动文字)
别称 Wobbly Text, Turbulence Text
借助 SVG 置换滤镜，字母边缘像手绘一样抖动。
适用场景
草图风或俏皮的标题
在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果，也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动，就像每秒被手工重画好几次：是含蓄、细碎的抖动，而不是顺滑的波浪。
保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。ABC DEFGHI JKLMNO PQR
在里面滚动
Sticky Text Fade (吸顶文字淡入淡出)
别称 Sticky Scroll Text Opacity Fade
文字固定不动，各行随滚动进度淡入淡出。
适用场景
滚动叙事
在[应用位置]添加“吸顶文字淡入淡出”(Sticky Text Fade)效果，也叫 sticky scroll text opacity fade。
该区块滚动期间，文字块固定在原位，各行随滚动进度逐行淡入淡出。
让淡入淡出直接跟随滚动位置，往回滚动时随之反转；无论透明度如何，每一行都要能被屏幕阅读器读到。Stroke Text Draw (描边文字绘制)
别称 Draw In Text, Animated Stroke Text
先以描边绘出字母轮廓，再显示填充。
适用场景
Logo、首屏大字
在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果，也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出，轮廓完成后填充再淡入。
页面加载时只播放一次，让文字保持为可访问的真实文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已填充的文字。