提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“文字变形”(Morphing Text)效果，也叫 text morph。
一个词在同一位置变模糊，以柔和、黏稠的方式融合成下一个词，然后停留片刻再进行下一次切换。
词语之间无缝循环，让屏幕阅读器把这些词当作普通文字读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止循环。相似的动效
ABDEFGHIJKLDEFMN
Word Rotate (词语轮播)
别称 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
句子中的一个词以滑动、翻转或淡入淡出的方式换成列表中的下一个词。
适用场景
首屏标语
在[应用位置]添加“词语轮播”(Word Rotate)效果，也叫轮换词(rotating words)或翻转词(flip words)。
行内的一个词向上滑出，列表中的下一个词从下方滑入，每个词停留片刻后再切换。
词宽不同时不要让这一行的其余部分跳动，不要让屏幕阅读器播报每次切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止轮播。AWBXCYDZ
Text Replacement (文字替换)
别称 Text Swap
原有文字以动画方式退出，并被新的文字内容替换。
适用场景
会变化的标签
在[应用位置]添加“文字替换”(Text Replacement)效果，也叫文字切换(text swap)。
文字变化时，旧字符向上滑出，新字符从下方滑入，逐个字符形成快速而流畅的波动。
切换过程中不要让文本框尺寸跳动，并且只向屏幕阅读器播报新文本。ABCD
Blur In (模糊进入)
别称 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素从严重模糊的状态逐渐变清晰，常伴随滑入或淡入。
适用场景
标题和首屏文字的显现
在[应用位置]添加“模糊进入”(Blur In)入场动画，也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始，在原地逐渐变清晰：柔和、偏慢，没有位移。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示清晰的文字。将鼠标悬停在上面
Gooey Effect (粘滞融合)
别称 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
借助模糊与对比度滤镜，相邻的形状像液滴一样相互融合。
适用场景
菜单、光标和分页
在[应用位置]添加“粘滞融合”(Gooey Effect)效果，也叫 goo effect 或元球(metaballs)。
指针悬停时，小液滴像液体一样从主体上拉长后脱离；指针移开后，它们流回来并平滑地融合在一起。
模糊加对比度滤镜只作用于这一小组形状，不要作用于整个页面；键盘聚焦和点按时也显示同样的效果。Text 中的其他动效
ABCDEF
Neon Glow Text (霓虹发光文字)
别称 Neon Sign Flicker, Glowing Text
文字像霓虹灯管一样发光，并闪烁或脉动。
适用场景
夜生活、游戏主题
在[应用位置]添加“霓虹发光文字”(Neon Glow Text)效果，也叫霓虹招牌闪烁(neon sign flicker)或发光文字(glowing text)。
文字像霓虹灯管一样发出柔和、稳定的光，偶尔像真实招牌那样短暂熄灭一下。
闪烁要偶尔出现而不是快速连闪，因为快速闪光可能伤害部分用户；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持稳定发光。A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
在里面滚动
Scrolling Letters (滚动字母)
别称 On-Scroll Letter Animations
用户滚动经过各个章节时，标题的字母依次变换或移动。
适用场景
章节指示
在[应用位置]添加“滚动字母”(Scrolling Letters)效果，也叫 on-scroll letter animations。
用户滚动经过各章节时，标题的字母从左到右依次滚动到下一个字符，并直接跟随滚动位置变化。
向上滚回时字母要滚回原样，屏幕阅读器要以普通文字获取当前标题。ABC DEFGH
Shimmer Text (流光文字)
别称 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
一道亮光反复扫过文字。
适用场景
徽章、公告胶囊标签
在[应用位置]添加“流光文字”(Shimmer Text)效果，也叫 animated shiny text 或金属流光文字(metallic shimmer text)。
一条光带从左到右顺滑地扫过文字，短暂停顿后再重复。
高光经过时文字仍要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。