提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“动态渐变文字”(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),就保持静止。ABCDEF
将鼠标悬停在上面
Holographic Text (全息文字)
别称 Holographic Foil Text
文字呈现流转的彩虹箔片反光,随指针或时间移动。
适用场景
高级感卡片
在[应用位置]添加“全息文字”(Holographic Text)悬停效果,也叫全息箔片文字(holographic foil text)。
指针停在文字上时,一道箔片般的彩色光带在字母上缓慢、顺滑地来回滑动;指针移开后,文字恢复原本的朴素样子。
光泽流动的任何时刻文字都要清晰可读;键盘聚焦时也显示同样的效果。Animated Gradient (动态渐变)
别称 Gradient animation, Moving gradient, Background gradient animation
渐变背景中的颜色缓慢变化、平移或旋转。
适用场景
首屏背景、按钮
在[应用位置]添加“动态渐变”(Animated Gradient)背景,也叫 gradient animation 或 moving gradient。
渐变的颜色在区域内缓慢平移,柔和、连续地流动,循环重新开始时不能出现可见的跳动。
上方的文字在每种颜色上都要清晰可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止移动。Video Text (视频文字)
别称 Text Video Mask
大号字母如同窗口,里面显示正在播放的视频。
适用场景
首屏标题
在[应用位置]添加“视频文字”(Video Text)效果,也叫文字视频遮罩(text video mask)。
让粗大的字母成为观看正在播放视频的窗口,动态画面只在字母形状内显示。
视频保持静音、循环播放且不显示控件,为屏幕阅读器提供真实的文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),则显示一帧静止画面。Text 中的其他动效
ABCDEF
将鼠标悬停在上面
Glitch Text (故障文字)
别称 Text Glitch, RGB Split Glitch
文字像信号故障一样抖动,出现切片错位和红青色分离。
适用场景
赛博朋克或游戏风格标题
在[应用位置]添加“故障文字”(Glitch Text)悬停效果,也叫 text glitch 或 RGB 分离故障(RGB split glitch)。
指针停在文字上时,文字以快速、利落的阵发方式抖动:细细的横向切片左右跳动,两份彩色副本像信号故障一样错开;指针移开后恢复原状。
真实文字在文档中只保留一份,避免屏幕阅读器读出副本;键盘聚焦时也显示同样的效果。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),就停止运动。