提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“液体填充文字”(Liquid Fill Text)效果,也叫 water fill text。
描边的字母中注满液体,波浪状的液面横向翻滚,液位缓慢地起伏,形成柔和、连续的循环。
单词要保留为真实文本供屏幕阅读器读取;如果用户开启了“减少动态效果”(prefers-reduced-motion),就让液体停在一个静止的液位。相似的动效
Video Text (视频文字)
别称 Text Video Mask
大号字母如同窗口,里面显示正在播放的视频。
适用场景
首屏标题
在[应用位置]添加“视频文字”(Video Text)效果,也叫文字视频遮罩(text video mask)。
让粗大的字母成为观看正在播放视频的窗口,动态画面只在字母形状内显示。
视频保持静音、循环播放且不显示控件,为屏幕阅读器提供真实的文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),则显示一帧静止画面。ABCDABCD
将鼠标悬停在上面
Text Hover Effect (文字悬停效果)
别称 Gradient Outline Text Hover, Text Fill on Hover
描边文字被跟随指针或横扫而过的渐变填充或点亮。
适用场景
大号展示文字、页脚
在[应用位置]添加“文字悬停效果”(Text Hover Effect),也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边;指针停在上面时,实色填充从左到右平滑地扫入,指针移开后再退回去。
填充前的描边文字也要清晰可读,并且在键盘聚焦时呈现同样的效果。Stroke Text Draw (描边文字绘制)
别称 Draw In Text, Animated Stroke Text
先以描边绘出字母轮廓,再显示填充。
适用场景
Logo、首屏大字
在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果,也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出,轮廓完成后填充再淡入。
页面加载时只播放一次,让文字保持为可访问的真实文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示已填充的文字。Text 中的其他动效
ABCD EFGHI JKLM
Mask Reveal (遮罩显现)
别称 Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
文字从一条裁切线后方向上滑出,仿佛凭空出现。
适用场景
编辑风格的大标题
在[应用位置]添加“遮罩显现”(Mask Reveal)文字入场效果,也叫行遮罩显现(line mask reveal)或文字遮罩(text masking)。
每一行文字从一条看不见的边缘后方向上滑出,仿佛凭空出现,一行接一行,快速顺滑,不要有弹跳感。
文字滚动进入视口时只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示文字,不做动画。Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text (数字雨文字)
别称 Digital Rain Text
绿色字符像《黑客帝国》里的代码雨一样成列落下。
适用场景
黑客主题
在[应用位置]添加“数字雨文字”(Matrix Text)效果,也叫 digital rain text。
一列列字符以略有差异的速度稳定落下,每列最前面的字符明亮,后面拖着逐渐淡去的尾迹。
把它当作对屏幕阅读器隐藏的装饰,保持轻量;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止动画。ABCDEF
字母向下滴落、拉长,仿佛正在融化。
适用场景
恐怖或趣味标题
在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷,下方拉出滴落的液滴,仿佛正在融化,最后停在静止的融化形态。
文字进入视口时只播放一次,结束时保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则不做动画。