纯 css 可用 clip-path + mask + 关键帧动画逼近流体融合效果；核心是贝塞尔曲线控制形变，避免 svg path 动画与 transform scale，需设 will-change: clip-path 和 overflow: hidden，并用 radial-gradient mask 实现渐变融合。
纯 CSS 无法真正模拟流体物理，但可以用 clip-path + mask + 关键帧动画逼近「融合球」的视觉效果；核心是用贝塞尔曲线控制形变路径，而非依赖 SVG 或 JS。
为什么不用 SVG path 动画？
SVG 的 <path></path> 动画虽然精确，但两个球融合时需实时计算交集路径，CSS 中无法动态生成 path 数据。强行用 stroke-dasharray 或 SMIL 会导致过渡生硬、兼容性差（尤其 Safari 对 SMIL 的支持已弃用）。clip-path 的 circle() 和 ellipse() 函数虽简单，但配合 animation-timing-function: cubic-bezier(0.6, -0.2, 0.4, 1.2) 可制造「拉伸—吸附—合并」的错觉。
- 避免用
path("M...")做 clip-path 动画：浏览器渲染压力大，且无法硬件加速 - 不要给两个球同时加
transform: scale()：会破坏融合中心点，导致“弹开”感 - 必须设置
will-change: clip-path（仅对支持该属性的浏览器），否则 iOS Safari 动画掉帧明显
mask 比 clip-path 更适合渐变融合
当需要「半透明渗透」「边缘模糊融合」效果时，mask 是更可控的选择。用一个径向渐变遮罩覆盖两个重叠区域，再通过 @keyframes 控制 mask 的 mask-position 和 mask-size，就能模拟液体表面张力下的缓慢汇合。
- mask 图像必须是单通道灰度图，推荐用
radial-gradient(circle at 50% 50%, #000 0%, transparent 70%) - mask-size 从
120% 120%动到60% 60%，能强化「收缩合并」感 - 慎用
mask-composite: intersect：Chrome 119+ 支持，但 Firefox 目前不支持，降级方案是用伪元素叠加灰度 mask 层
关键参数：贝塞尔曲线要带负/超高值
标准缓动函数（如 cubic-bezier(0.4, 0, 0.2, 1)）会让球体运动太“机械”。真实液体融合有惯性延迟和回弹，必须用超出 [0,1] 范围的控制点：
animation-timing-function: cubic-bezier(0.7, -0.3, 0.3, 1.4);
- 第一个 y 值为负（如 -0.3）：制造初始“拉长”趋势
- 第四个 y 值 >1（如 1.4）：产生轻微过冲，模拟表面张力回弹
- 不能直接用
ease-in-out：过渡太平滑，缺乏液态粘滞感
最易被忽略的是容器的 overflow: hidden 必须显式声明——否则融合过程中球体超出边界的部分会意外显示，破坏“封闭液滴”观感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
