Particles (粒子)
别称 Floating particles, Particle field
大量小圆点在背景中漂浮、相互连接或对指针作出反应。
适用场景
首屏和区块背景
变体
- floating
- connected lines
- pointer-repel
- 3D floating
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“粒子”(Particles)背景，也叫 floating particles 或 particle field。
大小不一的小圆点各按自己的节奏，沿着柔和、随意游走的路径缓慢漂浮：平静而轻盈。
圆点数量要适中，在性能较弱的设备上也保持轻快；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。相似的动效
Starfield (星空)
别称 Stars background, Twinkling stars
细小的星星在如太空般的深色背景上闪烁或漂移。
适用场景
太空或夜晚主题的首屏
在[应用位置]添加“星空”(Starfield)背景，也叫 stars background 或 twinkling stars。
大小不一的小星星各按自己的节奏柔和地闪烁，整片星空非常缓慢地漂移：安静而平和。
星星数量要适中，保持轻快；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁和漂移。ABC
Sparkles (闪耀粒子)
别称 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
细小明亮的光点在文字或区块周围闪现又消失。
适用场景
大标题、高级感点缀
在[应用位置]添加“闪耀粒子”(Sparkles)效果，也叫 glitter 或 twinkle particles。
小小的星形光点在文字周围分散的位置、随机的时刻冒出来，闪烁后淡出：轻盈而迅速。
光点只作装饰，要对屏幕阅读器隐藏，绝不能遮住文字本身；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁。Vortex (漩涡)
别称 Swirling particles
粒子像漩涡一样绕着中心螺旋旋转。
适用场景
有冲击力的首屏背景
在[应用位置]添加“漩涡”(Vortex)背景，也叫 swirling particles。
小粒子像漩涡一样绕着中心点螺旋向内旋转，在边缘淡入，接近中心时淡出，形成流畅、连续的旋涡。
粒子数量要适中；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。A
点击试试
Confetti (撒花)
别称 Confetti burst, Celebration
彩色纸片喷涌而出再飘落下来，用来庆祝成功。
适用场景
购买完成、达成目标
在[应用位置]添加“撒花”(Confetti)庆祝效果，也叫彩纸迸发(confetti burst)。
彩色小纸片从按钮中快速迸发出来，然后翻滚着飘落并渐渐淡出，形成一阵短促而热闹的纸片雨。
每次成功只触发一次，不要循环，不要挡住页面上的点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要播放。Background & Ambient 中的其他动效
ABCDEFGHIJKL
在里面滚动
Progressive Blur (渐进模糊)
别称 Gradient blur edge
模糊强度朝边缘逐渐增加，让内容柔和地淡出。
适用场景
滚动容器边缘、页头
在[应用位置]添加“渐进模糊”(Progressive Blur)边缘，也叫 gradient blur edge。
朝边缘滚动的内容要逐渐变得更模糊、更柔和，平滑过渡，而不是在一条生硬的线上被截断。
只在后面还有更多内容的边缘显示模糊，并且模糊区域不能挡住点击或滚动。Retro Grid (复古网格)
别称 Perspective grid, Synthwave grid
倾斜的透视网格像合成波地面一样朝观者滚动而来。
适用场景
复古和未来风首屏
在[应用位置]添加“复古网格”(Retro Grid)背景，也叫透视网格(perspective grid)或 synthwave grid。
一片向远处倾斜的透视网格地面匀速朝观者滚动，并在地平线处淡出：流畅、无尽。
循环要无缝，线条不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止滚动。A
Ripple Rings (同心波纹)
别称 Background ripple, Concentric ripples
同心圆从中心点向外扩散并逐渐淡出。
适用场景
首屏中心元素、音频或配对视觉
在[应用位置]添加“同心波纹”(Ripple Rings)效果，也叫 background ripple 或 concentric ripples。
圆环从中心点不断向外扩散，越大越淡，一个接一个、间距均匀：缓慢而稳定。
中心元素保持静止、位置不变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止波纹。