纯 css 无法实现真实水珠融合效果，因 clip-path 动画仅支持线性插值，无法模拟液体靠近拉伸、接触吸附、合并回弹三阶段；svg + gsap 是唯一可靠方案。
纯 CSS 无法真正实现水珠融合时的表面张力、拓扑变形或粘连回弹——你看到的“黏连”效果，99% 是视觉错觉或 SVG 驱动的结果。直接用 clip-path + transition 切换两个圆形路径，只会得到生硬拉伸或 Safari 直接不渲染。
为什么 clip-path + transition 做不出真黏连
浏览器对 clip-path 的动画支持本质是线性插值：起点形状 A 和终点形状 B 之间做匀速过渡。但真实液体融合有三阶段：靠近时边缘拉长 → 接触点产生吸附形变 → 合并后轻微回弹收缩。这些非线性变化，clip-path: circle() 或 polygon() 根本无法表达。
- 常见错误现象：
clip-path: circle(50px at 100px 100px)→clip-path: circle(80px at 120px 100px)过渡时，球体像被橡皮筋拽着平移，毫无“液态吸附感” - 兼容性雷区：Safari 对
clip-path动画掉帧严重，且不支持clip-path: path()的动画（仅 Firefox 曾实验性支持） - 性能陷阱：用
path("M...C...")做关键帧动画，每帧重解析字符串，CPU 占用飙升，iOS 上直接卡死
可用的纯 CSS “类黏连”方案（仅限视觉逼近）
如果你必须只用 CSS，且接受“看起来像”，可组合 filter + mask + 贝塞尔缓动，绕过形状插值本身：
- 用两个绝对定位的
.drop元素，初始分离；容器设overflow: hidden（否则融合时边缘溢出） - 给容器加
mask: radial-gradient(circle, black 60%, transparent 70%)，再通过@keyframes动画mask-position和mask-size，模拟“收缩汇合” - 关键缓动必须用超范围贝塞尔：
cubic-bezier(0.7, -0.3, 0.3, 1.4)—— 负 y 值制造初始拉伸，y > 1 制造过冲回弹 - 叠加一层
filter: blur(8px) contrast(12)在容器上，能强化模糊边缘的“粘连错觉”，但颜色需谨慎选（cyan/teal 比 red/blue 更稳定）
真正可靠的做法：SVG + GSAP
要让两个水珠在靠近时自动延长贝塞尔控制点、接触后合并为单条连续路径、结束时轻微震荡，唯一可行路径是 SVG <path></path> + JS 驱动：
- 结构必须是单个
<path></path>，初始d="M20,50 A30,30 0 0,1 80,50 C60,30 60,70 80,50"，其中C段控制点随两圆心距离动态缩放 - 用 GSAP 的
attr: { d: newD }插值，而非直接传字符串；配合force3D: true防止 Chrome 掉帧 - 禁止用
gsap.set(path, { attr: { d } })初始化——它不触发渲染，得用gsap.fromTo或先设opacity: 0.001 - 融合临界点靠欧氏距离判断：
if (dist 才启动融合逻辑，避免过早形变
最容易被忽略的细节：所有方案都依赖容器明确声明 overflow: hidden。没这句，融合过程中任何超出边界的形变都会漏出来，彻底破坏“液滴封闭感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
