提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“文字重复”(Text Repetition)效果,也叫 repeated text scroll。
把一个词复制成一叠更淡的描边副本,随用户滚动从它身后展开,向上滚动时再收拢回去。
让展开程度直接绑定滚动位置,并对屏幕阅读器隐藏多余的副本,让这个词只被读一次。相似的动效
ABCDEFABCDEF
Line Shadow Text (线条阴影文字)
别称 Text Shadow Animation, Dancing Shadow
字母后方的条纹或错位阴影朝一个方向移动。
适用场景
醒目的大标题
在[应用位置]添加“线条阴影文字”(Line Shadow Text)效果,也叫 text shadow animation 或 dancing shadow。
字母后方由细斜条纹组成的错位阴影缓慢、持续地滑动,字母本身保持静止、清晰。
条纹的移动要无缝循环;如果用户开启了“减少动态效果”(prefers-reduced-motion),就让阴影保持静止。A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
在里面滚动
Text Marquee on Scroll (滚动文字跑马灯)
别称 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
页面纵向滚动时,大号文字行横向滑动。
适用场景
品牌标语、首屏区块
在[应用位置]添加“滚动文字跑马灯”(Text Marquee on Scroll),也叫 scroll text marquee 或 scroll velocity text。
页面向下滚动时,大号文字行横向滑动,相邻行朝相反方向移动;向上滚动时再滑回来。
让移动绑定滚动位置,不要让长文字行产生横向滚动条;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。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),就停止运动。Text 中的其他动效
AWBXCYDZ
Text Replacement (文字替换)
别称 Text Swap
原有文字以动画方式退出,并被新的文字内容替换。
适用场景
会变化的标签
在[应用位置]添加“文字替换”(Text Replacement)效果,也叫文字切换(text swap)。
文字变化时,旧字符向上滑出,新字符从下方滑入,逐个字符形成快速而流畅的波动。
切换过程中不要让文本框尺寸跳动,并且只向屏幕阅读器播报新文本。ABCDEFGHIJKLMNOPQRSTUVWXYZ
在里面滚动
Text Reveal (文字显现)
别称 Scroll Text Reveal, Word-by-word Reveal
随着用户滚动,段落中的文字从暗淡变为完全不透明。
适用场景
宣言或引言段落
在[应用位置]添加“文字显现”(Text Reveal)效果,也叫滚动文字显现(scroll text reveal)或逐词显现(word-by-word reveal)。
段落起初是暗淡的,随着用户滚动,每个词依次亮到完全清晰,与滚动位置绑定。
向上滚回时文字重新变暗;无论暗淡程度如何,整段文字都要始终能被屏幕阅读器读取。ABCDEFGHIJKL
移动指针试试
Text Reveal Card (文字显现卡片)
别称 Spotlight Text Reveal
在卡片上移动指针时,遮罩边缘或聚光灯下隐藏的文字随之显露。
适用场景
功能卡片
在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果,也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时,一条竖直边缘紧紧跟随,在一侧露出隐藏的文字:流畅、直接,没有延迟。
在没有指针可跟随的触屏设备上,让拖动或点按也能显示隐藏文字,并让隐藏文字可被屏幕阅读器读取。