提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“环形旋转文字”(Spinning Text),也叫环形文字(circular text)或 text on circle。
字母沿圆周均匀排列,整个圆缓慢、匀速地旋转,循环重新开始时不能有跳动。
只向屏幕阅读器提供一次普通文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止旋转。相似的动效
Spin (无限旋转)
别称 Rotate Loop, Spinner
元素以恒定速度持续旋转。
适用场景
加载转圈指示器
在[应用位置]添加“无限旋转”(Spin)效果,也叫 spinner 或 rotate loop。
元素要以恒定、均匀的速度持续旋转,每圈之间不要有缓动。
让循环无缝衔接,给 spinner 加上无障碍的“加载中”标签;如果用户开启了“减少动态效果”(prefers-reduced-motion),就放慢或停止旋转。A
Orbiting Circles (环绕轨道)
别称 Orbit Animation, Orbit, Orbiting icons
小圆点或图标沿圆形轨道绕中心旋转。
适用场景
集成关系图
在[应用位置]添加“环绕轨道”(Orbiting Circles),也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转,外圈则以更慢的速度反向旋转。
循环要无缝,环绕的元素始终保持正立;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止旋转。在里面滚动
Text Path Scroll (路径文字滚动)
别称 Text Path Curve Scroll Animation
文字沿曲线路径排列,并随用户滚动沿路径移动。
适用场景
叙事型版块
在[应用位置]添加“路径文字滚动”(Text Path Scroll)效果,也叫 text path curve scroll animation。
文字排在一条曲线上,随用户滚动沿曲线滑动:向下滚动时前进,向上滚动时后退。
让移动直接绑定滚动位置、没有延迟,并让屏幕阅读器把它当作普通文本读取。Text 中的其他动效
ABCDEF
Split Text Stagger (拆分文字交错)
别称 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
标题被拆分成字符、单词或行,以短暂延迟依次动画入场。
适用场景
大标题、章节标题
在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果,也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母,字母之间留出短暂延迟,依次上移并淡入,快速顺滑,不要有弹跳感。
标题进入视口时只播放一次,让屏幕阅读器把它当作一个完整的词读出;如果用户开启了“减少动态效果”(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
Squiggly Text (手绘抖动文字)
别称 Wobbly Text, Turbulence Text
借助 SVG 置换滤镜,字母边缘像手绘一样抖动。
适用场景
草图风或俏皮的标题
在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果,也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动,就像每秒被手工重画好几次:是含蓄、细碎的抖动,而不是顺滑的波浪。
保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。