水滴融合动画需用贝塞尔曲线路径实现，统一用path()定义各状态并确保顶点数一致；Chrome 115+须用@property声明--drop-path并配合JS注入；真融合需JS检测碰撞并动态移除元素。
水滴融合动画的核心是贝塞尔曲线控制形变
纯 CSS 实现“水滴融合”不是靠画 SVG 路径，而是用 clip-path 配合 transform: scale() 和缓动函数模拟液态拉伸感。关键在于：水滴轮廓必须用 path() 或 ellipse() + inset() 组合出可连续插值的形状，且所有关键帧的 clip-path 必须有相同顶点数（否则浏览器会 fallback 到离散跳变）。
常见错误是直接用两个 circle() 做 keyframe 插值——CSS 不支持 circle() 到 circle() 的路径插值，结果是生硬缩放而非融合。正确做法是统一用 path() 描述所有状态，例如起始水滴、拉伸中段、合并后大水滴，全部由 8～12 个控制点构成闭合贝塞尔路径。
- 推荐用工具生成基础 path：Figma 导出 SVG 后提取
d属性，再用 lottie-web 的path-data-parser简化为 10 点以内 - 动画时长建议 ≥ 800ms，
ease-in-out不够用，换成cubic-bezier(0.34, 1.56, 0.64, 1)模拟表面张力回弹 - 务必加
will-change: clip-path，否则 Safari 下clip-path动画掉帧严重
用 @property 解决 Chrome 115+ 的 clip-path 动画兼容问题
Chrome 115 起对未注册的 clip-path 自定义属性动画做了限制，直接写 clip-path: path("M...") 在 keyframes 里会静默失效。必须先用 @property 显式声明类型：
/* 必须放在 :root 或对应作用域 */
@property --drop-path {
syntax: "<custom-ident>";
inherits: false;
initial-value: "M0,0";
}</custom-ident>
然后在元素上绑定：
.drop {
clip-path: path(var(--drop-path));
animation: drip-merge 1200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
<p>@keyframes drip-merge {
0% { --drop-path: "M20,30 Q30,10 40,30 Q50,50 40,70 Q30,90 20,70 Q10,50 20,30 Z"; }
50% { --drop-path: "M20,30 Q35,-5 50,30 Q65,65 50,100 Q35,135 20,100 Q5,65 20,30 Z"; }
100% { --drop-path: "M30,40 Q45,15 60,40 Q75,65 60,90 Q45,115 30,90 Q15,65 30,40 Z"; }
}</p>
注意：@property 的 syntax 不能设为 style.setProperty('--drop-path', ...)，CSS 只负责过渡逻辑。
移动端性能陷阱：避免在 clip-path 动画中嵌套 filter
加 drop-shadow() 或 blur() 看起来更真实，但 iOS Safari 会强制把整个元素提升为独立图层并频繁重绘，导致 60fps 直接崩到 20fps。实测发现，哪怕只是 filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2))，在 iPhone 12 上动画一卡一卡。
替代方案很直接：
- 用伪元素
::after单独画阴影，只给它加transform: translateY()模拟投影位移，不触发动态clip-path - 水滴高光用
radial-gradient()叠在background里，而非filter: brightness() - 绝对不要在动画元素上同时写
clip-path和backdrop-filter，iOS 下直接白屏
真·融合效果需要 JS 辅助判断碰撞时机
CSS 动画只能做预设轨迹，真正的“两滴水相遇后开始拉伸融合”，得靠 JS 检测两个元素的 bounding rect 重叠度。当 intersectionRatio > 0.3 时，才触发融合动画类名：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio > 0.3) {
entry.target.classList.add('is-merging');
// 同时清除其他水滴的 is-merging 类，避免多滴同时融合失真
document.querySelectorAll('.drop').forEach(d => {
if (d !== entry.target) d.classList.remove('is-merging');
});
}
});
}, { threshold: [0, 0.1, 0.3, 0.5] });
<p>drops.forEach(drop => observer.observe(drop));</p>
这时候 CSS 里的 .drop.is-merging 才真正接管动画。漏掉这步，所有水滴按固定时间轴动，看起来就是机械复制，毫无物理感。
最易被忽略的是：融合动画结束后，DOM 中其实应该只剩一个水滴元素——另一滴得用 JS 移除，否则视觉上像粘连着半截残影。这个清理动作不能依赖 CSS animationend，得在 JS 里用 setTimeout 精确匹配动画时长后执行 drop2.remove()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
