纯CSS粘性球融合动画本质是blur与contrast滤镜分层协同的视觉错觉:小球仅设blur(4–6px),容器统一设contrast(8–12),二者叠加使模糊交界“收口”形成粘连感;须absolute定位、transform动画、明确背景色,Safari需will-change和参数严控。

纯 CSS 做不出真正物理意义上的水滴粘连,但用 filter: blur() + filter: contrast() 组合,能在视觉上稳定模拟出“靠近即拉丝、接触即融合”的黏性效果——这是目前兼容性最好、零 JS、可直接上线的方案。
blur 和 contrast 必须分层设置,不能写在同一个元素上
常见错误是给小球自己加 filter: blur(5px) contrast(10),结果模糊被对比度反向压平,完全没粘连感。正确结构是:
- 每个小球(
.drop)只设filter: blur(5px),且必须用position: absolute定位 - 包裹它们的父容器(如
.gooey-container)统一设filter: contrast(10) - 容器必须有明确背景色,比如
background: white或background: rgba(255,255,255,0.01);Safari 下transparent会直接让contrast失效
动画必须用 transform,禁用 width/height 和 left/top
滤镜区域不会随 width/height 或 left/top 实时重绘,一动就断连。实测 Safari 尤其敏感:
- 位移动画只用
transform: translateX()/translateY() - 形变(如挤压延展)只用
transform: scale(),别碰width和height - 所有动球元素加
will-change: transform,否则 iOS Safari 动画掉帧明显 - 多球场景下,用
animation-delay错开起始时间,比同步运动更自然
Safari 兼容性关键参数区间
Chrome 对滤镜宽容,但 Safari(尤其是 iOS ≤16.3)极挑剔,超出范围直接退化成两个硬边球:
立即学习“前端免费学习笔记(深入)”;
-
blur()安全区:4px–6px(blur(2px)不够软,blur(8px)在旧版 iOS 失效) -
contrast()安全区:8–12(必须无单位,contrast(10)✅,contrast(1000%)❌) - 推荐起手值:
blur(5px)+contrast(10),球体较小时微调为blur(4px)+contrast(12) - 动画总时长建议 ≥ 1.6s,太快融合过程不可见;缓动用
ease-in-out比linear更可信
真正难的是控制“临界点”——两个球靠太近时,blur 区域过度重叠反而糊成一团;靠太远又断连。这没法靠参数穷举,得在 Safari 真机上反复调 translateX() 偏移量和 blur 值,直到拉丝感刚好出现又不崩形。


















