MOTION HUB

液态光斑

Liquid Blob
#liquid-blob · 31/72
AUTO · 自动演示

参数调改

PLAYGROUND
液团主色--blob_a
液团高光色--blob_b
蠕动周期--morph_s
830
s
模糊半径--blur_px
1680
px
底色--base

实现要点

NOTES
  1. 01

    液态感配方:不规则 border-radius(水平/垂直各四个百分比)+ rotate + scale 一起缓动,边界没有直线段,模糊后像一团有表面张力的液体在蠕动。

  2. 02

    border-radius 动画逐帧重绘:把重绘范围锁在容器内的独立 blur 层里(面积可控);不要给每个 blob 单独加 filter 再叠 blend,成本会翻几倍。

  3. 03

    主副两团用 1x / 1.4x 双周期 + 负 delay 错相位,交叠处 screen 提亮;radial-gradient 的高光圆心偏移到 38% 34%,让液团有受光面而不是平涂。

  4. 04

    wash 常显垫底;--morph_s 从 8s 调到 30s,可以从『躁动的水滴』调到『深水缓慢呼吸』。

  5. 05

    reduced-motion 下停用蠕动,液团保持一个有机形态静止;实际页面建议垫在内容之下并压低透明度。

源代码

SOURCE

加载源代码…