AUTO · 自动演示
参数调改
PLAYGROUND
雾色 A(主)--fog_a
雾色 B--fog_b
漂移周期--drift_s
1250
模糊半径--blur_px
30100
雾浓度--fog_opacity
0.20.9
底色--base
实现要点
NOTES- 01
雾团是极扁的椭圆(宽 110%、高 30-36%)配 60px 级大模糊:模糊把椭圆糊成没有边界的雾带,『雾感』主要来自形状压扁 + 大 blur,而不是纹理。
- 02
三团雾以 1x / 1.35x / 0.75x 三档周期往复平移、负 delay 错相位;位移只有 ±6-7%——大雾的漂移应该是『几乎察觉不到但在动』。
- 03
blur 只挂在容器一层;wash 是静态雾带(常显基线),全部动画层透明度统一受 --fog_opacity 控制,调到最低也保有颜色基底。
- 04
mix-blend-mode: screen 让雾团交叠处轻微提亮出体积感;雾色用蓝灰低饱和家族但亮度必须与底色拉开一档(过暗的雾色配大 blur 会整片隐形),饱和度一高就变成彩色光斑而不是雾。
- 05
只动 transform(合成器路径);reduced-motion 下停用漂移,保留静态雾景。
源代码
SOURCE
加载源代码…