提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷,下方拉出滴落的液滴,仿佛正在融化,最后停在静止的融化形态。
文字进入视口时只播放一次,结束时保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则不做动画。相似的动效
ABC
ABC
将鼠标悬停在上面
SVG Displacement Distortion (SVG置换扭曲)
别称 feTurbulence Distortion, Displacement Map Effect
SVG 滤镜用动态噪声让文字或形状发生扭曲。
适用场景
液体或波纹悬停效果
在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果,也叫置换贴图效果(displacement map effect)。
指针悬停时,文字或形状像隔着流动的水一样荡漾晃动,效果柔和地渐入;指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜,静止时不产生任何开销;键盘聚焦时也显示同样的效果。ABCDEF
Squiggly Text (手绘抖动文字)
别称 Wobbly Text, Turbulence Text
借助 SVG 置换滤镜,字母边缘像手绘一样抖动。
适用场景
草图风或俏皮的标题
在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果,也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动,就像每秒被手工重画好几次:是含蓄、细碎的抖动,而不是顺滑的波浪。
保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
别称 Organic Text Distortion
文字随滚动或指针移动自然地扭曲、起伏。
适用场景
实验性作品集
在[应用位置]添加“文字扭曲”(Text Distortion)效果,也叫 organic text distortion。
一行文字不断横向流动,同时自然地扭曲、起伏,仿佛隔着流动的水去看,流动由用户的滚动驱动。
扭曲要足够轻,保证文字可读,在较慢的设备上也要流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭该效果。Text 中的其他动效
ABCDEFGHI
Morphing Text (文字变形)
别称 Text Morph
一个词在同一位置模糊并融合成下一个词。
适用场景
首屏标语
在[应用位置]添加“文字变形”(Morphing Text)效果,也叫 text morph。
一个词在同一位置变模糊,以柔和、黏稠的方式融合成下一个词,然后停留片刻再进行下一次切换。
词语之间无缝循环,让屏幕阅读器把这些词当作普通文字读出;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止循环。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。
用户滚动经过各章节时,标题的字母从左到右依次滚动到下一个字符,并直接跟随滚动位置变化。
向上滚回时字母要滚回原样,屏幕阅读器要以普通文字获取当前标题。