提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果,也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动,就像每秒被手工重画好几次:是含蓄、细碎的抖动,而不是顺滑的波浪。
保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就保持静止。相似的动效
ABC
ABC
将鼠标悬停在上面
SVG Displacement Distortion (SVG置换扭曲)
别称 feTurbulence Distortion, Displacement Map Effect
SVG 滤镜用动态噪声让文字或形状发生扭曲。
适用场景
液体或波纹悬停效果
在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果,也叫置换贴图效果(displacement map effect)。
指针悬停时,文字或形状像隔着流动的水一样荡漾晃动,效果柔和地渐入;指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜,静止时不产生任何开销;键盘聚焦时也显示同样的效果。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
别称 Organic Text Distortion
文字随滚动或指针移动自然地扭曲、起伏。
适用场景
实验性作品集
在[应用位置]添加“文字扭曲”(Text Distortion)效果,也叫 organic text distortion。
一行文字不断横向流动,同时自然地扭曲、起伏,仿佛隔着流动的水去看,流动由用户的滚动驱动。
扭曲要足够轻,保证文字可读,在较慢的设备上也要流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭该效果。ABCDEF
字母向下滴落、拉长,仿佛正在融化。
适用场景
恐怖或趣味标题
在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷,下方拉出滴落的液滴,仿佛正在融化,最后停在静止的融化形态。
文字进入视口时只播放一次,结束时保持文字可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则不做动画。Text 中的其他动效
ABC DEFGHI JKLMNO PQR
在里面滚动
Sticky Text Fade (吸顶文字淡入淡出)
别称 Sticky Scroll Text Opacity Fade
文字固定不动,各行随滚动进度淡入淡出。
适用场景
滚动叙事
在[应用位置]添加“吸顶文字淡入淡出”(Sticky Text Fade)效果,也叫 sticky scroll text opacity fade。
该区块滚动期间,文字块固定在原位,各行随滚动进度逐行淡入淡出。
让淡入淡出直接跟随滚动位置,往回滚动时随之反转;无论透明度如何,每一行都要能被屏幕阅读器读到。Stroke Text Draw (描边文字绘制)
别称 Draw In Text, Animated Stroke Text
先以描边绘出字母轮廓,再显示填充。
适用场景
Logo、首屏大字
在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果,也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出,轮廓完成后填充再淡入。
页面加载时只播放一次,让文字保持为可访问的真实文本;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示已填充的文字。AGBHCIDJEKFL
将鼠标悬停在上面
Text 3D Flip (文字3D翻转)
别称 3D Flip Text Reveal
字母或单词绕轴做 3D 翻转,露出背面的下一段文字。
适用场景
悬停链接、标题
在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果,也叫 3D flip text reveal。
指针移到文字上时,每个字母绕水平轴做 3D 翻转,露出另一面的新字母,一个接一个快速顺滑地扫过;指针移开时再翻回来。
翻转过程中保持文本框尺寸不变,键盘聚焦时也显示同样的效果。