纯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 值，直到拉丝感刚好出现又不崩形。
