浮动粒子 | wjs-css-effects

关键点

浮动粒子效果由多个小圆点组成，从底部向上缓慢漂浮，模拟尘埃或气泡上升
每个粒子设置不同的 animation-delay 和大小，随机感更强更自然
通过 transform: translateY() 从下往上位移，同时 opacity 从 0 到 1 再到 0
粒子数量越多视觉越丰富，但过多会影响性能，通常 20-50 个较合适
可加入轻微的横向漂移（translateX 正弦波变化），上升路径更真实

效果说明

粒子从底部向上浮动飘散。JS 随机生成多个粒子，为每个写入随机的水平位置、大小、动画时长与延迟，CSS 负责实际的 translateY 上浮与 opacity 淡入淡出。配合深色背景，营造类似萤火虫/气泡的氛围感，常用于登录页、活动头图的背景装饰。

CSS

JavaScript