提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果,也叫 3D flip text reveal。
指针移到文字上时,每个字母绕水平轴做 3D 翻转,露出另一面的新字母,一个接一个快速顺滑地扫过;指针移开时再翻回来。
翻转过程中保持文本框尺寸不变,键盘聚焦时也显示同样的效果。相似的动效
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),就不翻动,直接显示最终文字。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),则停止轮播。A
Flip In (翻转进入)
别称 Flip In X, Flip In Y
元素绕水平轴或垂直轴做 3D 旋转,从侧面朝向转为正对观看者。
适用场景
卡片和磁贴的显现
在[应用位置]添加“翻转进入”(Flip In)入场动画,也叫 flip in X 或 flip in Y。
元素从侧面朝向开始,绕水平轴旋转到正对观看者,略微转过头再回来后稳定:迅速,带一点晃动。
加上透视(perspective)让旋转有纵深感;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接以正面状态显示,不做动画。A
B
将鼠标悬停在上面
Card Flip (卡片翻转)
别称 Flip card, Card flip 3D, 3D flip on hover
卡片绕轴翻转半圈,露出背面。
适用场景
团队卡片、记忆卡片、价格详情
在[应用位置]添加“卡片翻转”(Card Flip)效果,也叫 flip card 或 card flip 3D。
指针停在卡片上时,卡片绕竖直轴透视翻转、露出背面;指针移开后翻回来:平滑而稳定。
隐藏每个面的背侧,避免正反两面互相透出;键盘焦点和触屏设备上的轻点也要能触发翻转。Text 中的其他动效
ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
别称 Organic Text Distortion
文字随滚动或指针移动自然地扭曲、起伏。
适用场景
实验性作品集
在[应用位置]添加“文字扭曲”(Text Distortion)效果,也叫 organic text distortion。
一行文字不断横向流动,同时自然地扭曲、起伏,仿佛隔着流动的水去看,流动由用户的滚动驱动。
扭曲要足够轻,保证文字可读,在较慢的设备上也要流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭该效果。ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
别称 Text Generate Effect
页面加载时,文字逐个淡入,常伴随模糊逐渐消散,仿佛正在生成。
适用场景
AI 风格的开场文案
在[应用位置]添加“文字生成”(Text Generate)效果。
文字逐个淡入,同时每个词上的柔和模糊逐渐消散,仿佛文本正在生成:节奏平稳、沉静。
页面加载时只播放一次,让屏幕阅读器立即读到完整文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。ABC DEFG HIJ KL
Text Highlighter (荧光笔高亮)
别称 Highlight Marker, Marker Underline, Hero Highlight
一条荧光笔般的色带划过短语,将其突出强调。
适用场景
强调关键语句
在[应用位置]添加“荧光笔高亮”(Text Highlighter)效果,也叫高亮标记(highlight marker)或马克笔下划线(marker underline)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后,就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次,保证色带上的文字清晰可读,并且在语句换成两行时让色带正确跟随。