SVG Displacement Distortion (SVG置换扭曲)
别称 feTurbulence Distortion, Displacement Map Effect
SVG 滤镜用动态噪声让文字或形状发生扭曲。
适用场景
液体或波纹悬停效果
变体
- turbulence wobble
- displacement map surface
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果，也叫置换贴图效果(displacement map effect)。
指针悬停时，文字或形状像隔着流动的水一样荡漾晃动，效果柔和地渐入；指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜，静止时不产生任何开销；键盘聚焦时也显示同样的效果。相似的动效
ABCDEF
Squiggly Text (手绘抖动文字)
别称 Wobbly Text, Turbulence Text
借助 SVG 置换滤镜，字母边缘像手绘一样抖动。
适用场景
草图风或俏皮的标题
在[应用位置]添加“手绘抖动文字”(Squiggly Text)效果，也叫 wobbly text 或 turbulence text。
字母边缘轻微抖动，就像每秒被手工重画好几次：是含蓄、细碎的抖动，而不是顺滑的波浪。
保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
别称 Organic Text Distortion
文字随滚动或指针移动自然地扭曲、起伏。
适用场景
实验性作品集
在[应用位置]添加“文字扭曲”(Text Distortion)效果，也叫 organic text distortion。
一行文字不断横向流动，同时自然地扭曲、起伏，仿佛隔着流动的水去看，流动由用户的滚动驱动。
扭曲要足够轻，保证文字可读，在较慢的设备上也要流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭该效果。ABCDEF
字母向下滴落、拉长，仿佛正在融化。
适用场景
恐怖或趣味标题
在[应用位置]添加“融化文字”(Melting Text)效果。
字母缓慢向下塌陷，下方拉出滴落的液滴，仿佛正在融化，最后停在静止的融化形态。
文字进入视口时只播放一次，结束时保持文字可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不做动画。SVG & Shape 中的其他动效
A
将鼠标悬停在上面
SVG Mask Reveal (SVG遮罩显现)
别称 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形状划过或跟随指针，露出下方的内容。
适用场景
图片和内容显现
在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。Blob Morph (液态变形)
别称 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
一团有机形状持续不断地改变自身轮廓。
适用场景
背景、头像和按钮
在[应用位置]添加“液态变形”(Blob Morph)循环动画，也叫 morphing blob 或 animated blob。
一团有机形状一边缓缓转动，一边不停地慢慢改变轮廓：流畅柔和，没有尖角。
循环要无缝衔接，形状不能跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。将鼠标悬停在上面
Gooey Effect (粘滞融合)
别称 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
借助模糊与对比度滤镜，相邻的形状像液滴一样相互融合。
适用场景
菜单、光标和分页
在[应用位置]添加“粘滞融合”(Gooey Effect)效果，也叫 goo effect 或元球(metaballs)。
指针悬停时，小液滴像液体一样从主体上拉长后脱离；指针移开后，它们流回来并平滑地融合在一起。
模糊加对比度滤镜只作用于这一小组形状，不要作用于整个页面；键盘聚焦和点按时也显示同样的效果。