AUTO · 自动演示
参数调改
PLAYGROUND
液团主色--blob_a
液团高光色--blob_b
蠕动周期--morph_s
830
模糊半径--blur_px
1680
底色--base
实现要点
NOTES- 01
液态感配方:不规则 border-radius(水平/垂直各四个百分比)+ rotate + scale 一起缓动,边界没有直线段,模糊后像一团有表面张力的液体在蠕动。
- 02
border-radius 动画逐帧重绘:把重绘范围锁在容器内的独立 blur 层里(面积可控);不要给每个 blob 单独加 filter 再叠 blend,成本会翻几倍。
- 03
主副两团用 1x / 1.4x 双周期 + 负 delay 错相位,交叠处 screen 提亮;radial-gradient 的高光圆心偏移到 38% 34%,让液团有受光面而不是平涂。
- 04
wash 常显垫底;--morph_s 从 8s 调到 30s,可以从『躁动的水滴』调到『深水缓慢呼吸』。
- 05
reduced-motion 下停用蠕动,液团保持一个有机形态静止;实际页面建议垫在内容之下并压低透明度。
源代码
SOURCE
加载源代码…