纯CSS“粘性球融合”动画本质是blur与contrast滤镜协同产生的视觉错觉：blur使边缘发散重叠变灰，contrast强行收口形成连接感；需同容器、absolute+transform定位、avoid width/height动画，Safari需will-change和明确背景色。
纯 CSS 实现“粘性球融合”动画，filter: blur() 和 filter: contrast() 组合确实能快速模拟出液体粘连的视觉错觉，但它不是真融合——只是边缘模糊被高对比度“收紧”后产生的光学欺骗。这个方案轻量、无需 JS、兼容性好（Chrome/Firefox/Edge 100%，Safari 15.4+ 稳定），但有明确边界：它只适用于两球**近距交叠、不强调物理逻辑**的 loading 场景。
为什么 blur + contrast 能“看起来像粘住”
本质是图像处理原理复刻 Photoshop 的“高斯模糊 + 亮度/对比度”图层叠加效果：
-
blur(5px)让两个球边缘发散、重叠区域变灰、过渡变软 -
contrast(10)或更高（如contrast(20)）把灰边强行压成黑/白，使模糊交界处“收口”，形成视觉上“被吸住”的连接感 - 关键前提：两个球必须在同一个父容器内，且该父容器统一加
contrast；子球各自加blur，否则滤镜不叠加或失效 - 常见错误现象：
contrast值太低（如contrast(2)）边缘仍毛糙；值太高（如contrast(100)）导致小球内部细节崩坏、色块断裂
定位与动画必须用 absolute + transform
用 left/top 配合 animation 移动球体时，容易触发 layout，且 Safari 对 left 动画的 subpixel 渲染不稳定，导致融合抖动或断连。正确做法是：
- 给小球设
position: absolute，再用transform: translateX()和translateY()控制位移 - 所有形变（宽高变化模拟拉伸）也必须走
transform: scale()，而非直接改width/height，否则 blur 区域不会随缩放实时重绘 - 动画时间建议 ≥ 2s，太快会让融合过程不可见；
ease-in-out比linear更自然，因液体靠近/分离本就非匀速 - 若需多球，每个球必须独立
z-index，否则blur层级错乱，粘连位置偏移
移动端适配与 Safari 的坑
这个组合在 iOS Safari 上表现最脆弱，稍不注意就退化成两个硬边球：
- Safari 对
filter的硬件加速支持较弱，务必加will-change: transform到动球元素上，否则动画掉帧明显 - 避免在
.effect容器上同时设background: transparent和filter: contrast()—— Safari 会忽略 contrast；必须设明确背景色（如white或rgba(255,255,255,0.01)） - blur 值超过
8px在旧版 iOS（≤16.3）可能直接失效，建议锁定blur(4px) ~ blur(6px)区间 - 不要用
@keyframes同时驱动transform和width/height—— Safari 会优先渲染尺寸变化，导致 blur 区域滞后一帧，瞬间“断连”
真正需要拓扑融合（比如两球接触后合并为一个、再分裂）、或要求响应鼠标距离实时变形的场景，blur+contrast 就到头了。这时候得切到 SVG + <path></path> + GSAP，靠贝塞尔控制点动态重算 d 属性——但那是另一个层级的实现成本了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
