提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“文字扭曲”(Text Distortion)效果,也叫 organic text distortion。
一行文字不断横向流动,同时自然地扭曲、起伏,仿佛隔着流动的水去看,流动由用户的滚动驱动。
扭曲要足够轻,保证文字可读,在较慢的设备上也要流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭该效果。相似的动效
ABC
ABC
将鼠标悬停在上面
SVG Displacement Distortion (SVG置换扭曲)
别称 feTurbulence Distortion, Displacement Map Effect
SVG 滤镜用动态噪声让文字或形状发生扭曲。
适用场景
液体或波纹悬停效果
在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果,也叫置换贴图效果(displacement map effect)。
指针悬停时,文字或形状像隔着流动的水一样荡漾晃动,效果柔和地渐入;指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜,静止时不产生任何开销;键盘聚焦时也显示同样的效果。ABCDEF
Squiggly Text (手绘抖动文字)
别称 Wobbly Text, Turbulence Text
借助 SVG 置换滤镜,字母边缘像手绘一样抖动。
适用场景
草图风或俏皮的标题
在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果,也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动,就像每秒被手工重画好几次:是含蓄、细碎的抖动,而不是顺滑的波浪。
保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。ABCDEF
字母向下滴落、拉长,仿佛正在融化。
适用场景
恐怖或趣味标题
在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷,下方拉出滴落的液滴,仿佛正在融化,最后停在静止的融化形态。
文字进入视口时只播放一次,结束时保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则不做动画。Text 中的其他动效
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)。
一条荧光笔般的色带从左到右平滑地划过关键语句的背后,就像有人用笔把它标出来。
在语句滚动进入视口时只播放一次,保证色带上的文字清晰可读,并且在语句换成两行时让色带正确跟随。ABCDABCD
将鼠标悬停在上面
Text Hover Effect (文字悬停效果)
别称 Gradient Outline Text Hover, Text Fill on Hover
描边文字被跟随指针或横扫而过的渐变填充或点亮。
适用场景
大号展示文字、页脚
在[应用位置]添加“文字悬停效果”(Text Hover Effect),也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边;指针停在上面时,实色填充从左到右平滑地扫入,指针移开后再退回去。
填充前的描边文字也要清晰可读,并且在键盘聚焦时呈现同样的效果。