提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“全息文字”(Holographic Text)悬停效果,也叫全息箔片文字(holographic foil text)。
指针停在文字上时,一道箔片般的彩色光带在字母上缓慢、顺滑地来回滑动;指针移开后,文字恢复原本的朴素样子。
光泽流动的任何时刻文字都要清晰可读;键盘聚焦时也显示同样的效果。相似的动效
ABCDEF
Animated Gradient Text (动态渐变文字)
别称 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
文字以渐变填充,颜色持续变换或流动。
适用场景
品牌标题
在[应用位置]添加“动态渐变文字”(Animated Gradient Text)效果,也叫极光文字(aurora text)或 rainbow text sweep。
文字用渐变填充,颜色在文字上缓慢、顺滑地流动,无缝地无限循环。
任何时刻文字都要在背景上清晰可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就让颜色保持静止。ABC DEFGH
Shimmer Text (流光文字)
别称 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
一道亮光反复扫过文字。
适用场景
徽章、公告胶囊标签
在[应用位置]添加“流光文字”(Shimmer Text)效果,也叫 animated shiny text 或金属流光文字(metallic shimmer text)。
一条光带从左到右顺滑地扫过文字,短暂停顿后再重复。
高光经过时文字仍要清晰可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。A
移动指针试试
Glare / Holographic Card (眩光全息卡片)
别称 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一样随指针在卡片表面移动。
适用场景
高级卡片或收藏卡
在[应用位置]添加“眩光全息卡片”(Glare / Holographic Card)效果,也叫 glare card 或 glare hover。
一道柔和明亮的高光随指针在卡片表面移动,像光线在上面反射,同时卡片朝指针方向微微倾斜;指针移开后两者都淡出:平滑而含蓄。
让点击能穿透高光层,保证其下的内容清晰可读;在触屏设备上显示不带高光的卡片。Text 中的其他动效
ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (动态排版)
别称 Kinetic Text
文字不再是静态文案,而是作为运动的图形元素缩放、移动或旋转。
适用场景
品牌首屏区块
在[应用位置]添加“动态排版”(Kinetic Typography),也叫 kinetic text。
一行行重复的大号文字以缓慢、稳定的节奏交替朝相反方向横向滑动,让文字本身变成运动的图形。
每一行都要无缝循环、看不出跳接,屏幕阅读器只读一遍文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止运动。ABCDEF
将鼠标悬停在上面
Letter Scatter (文字飞散)
别称 Explosive Letter Burst, Scatter Gather Letters
悬停时字母四散飞开再归位,或在入场时向外迸散。
适用场景
俏皮的链接
在[应用位置]添加“文字飞散”(Letter Scatter)悬停效果,也叫 scatter gather letters 或 explosive letter burst。
指针移到文字上时,每个字母带着一点旋转朝各自方向飞出一小段;指针移开后再顺滑地聚拢回原来的单词。
字母移动时,单词在布局中占的位置保持不变,屏幕阅读器要把它当作一个词来读;键盘聚焦时也显示同样的效果。ABCDEFABCDEF
Line Shadow Text (线条阴影文字)
别称 Text Shadow Animation, Dancing Shadow
字母后方的条纹或错位阴影朝一个方向移动。
适用场景
醒目的大标题
在[应用位置]添加“线条阴影文字”(Line Shadow Text)效果,也叫 text shadow animation 或 dancing shadow。
字母后方由细斜条纹组成的错位阴影缓慢、持续地滑动,字母本身保持静止、清晰。
条纹的移动要无缝循环;如果用户开启了“减少动态效果”(prefers-reduced-motion),就让阴影保持静止。