MOTION HUB

雾气漂移

Fog Drift
#fog-drift · 15/72
AUTO · 自动演示

参数调改

PLAYGROUND
雾色 A(主)--fog_a
雾色 B--fog_b
漂移周期--drift_s
1250
s
模糊半径--blur_px
30100
px
雾浓度--fog_opacity
0.20.9
底色--base

实现要点

NOTES
  1. 01

    雾团是极扁的椭圆(宽 110%、高 30-36%)配 60px 级大模糊:模糊把椭圆糊成没有边界的雾带,『雾感』主要来自形状压扁 + 大 blur,而不是纹理。

  2. 02

    三团雾以 1x / 1.35x / 0.75x 三档周期往复平移、负 delay 错相位;位移只有 ±6-7%——大雾的漂移应该是『几乎察觉不到但在动』。

  3. 03

    blur 只挂在容器一层;wash 是静态雾带(常显基线),全部动画层透明度统一受 --fog_opacity 控制,调到最低也保有颜色基底。

  4. 04

    mix-blend-mode: screen 让雾团交叠处轻微提亮出体积感;雾色用蓝灰低饱和家族但亮度必须与底色拉开一档(过暗的雾色配大 blur 会整片隐形),饱和度一高就变成彩色光斑而不是雾。

  5. 05

    只动 transform(合成器路径);reduced-motion 下停用漂移,保留静态雾景。

源代码

SOURCE

加载源代码…