怎样制作css水滴滴落的形状形变动画_通过border-radius的多数值过渡-css教程-PHP中文网

border-radius多值过渡无法实现水滴形变，因其仅按位置线性插值，无法模拟表面张力导致的非对称曲率变化；需用伪元素拆分+clip-path或transform组合实现。

怎样制作css水滴滴落的形状形变动画_通过border-radius的多数值过渡

border-radius 多值过渡为什么不能直接实现水滴形变

直接给 border-radius 设置从 50% 50% 50% 50% 到 50% 50% 0 0 的 transition，浏览器会按数值位置逐个插值——但水滴不是“上圆下平”，而是顶部收尖、底部拉长、两侧略内凹。纯多值过渡只能生成圆角矩形之间的线性变形，无法模拟表面张力导致的非对称曲率变化。

常见错误现象：border-radius: 50% 50% 0 0; 动画结束后看起来像倒扣的碗，不是水滴；或者用 border-radius: 50% 50% 20% 20%; 过渡时边缘生硬、无弹性感。

浏览器对 border-radius 多值插值是按「左上、右上、右下、左下」顺序一对一计算，不理解语义
真实水滴顶部曲率大（半径小），底部曲率小（半径大），且左右存在轻微不对称——这需要至少 4 组独立控制点
CSS 原生不支持贝塞尔曲率锚点，所以必须用 trick 拆解

用两个伪元素 + 不同 border-radius 模拟水滴轮廓

核心思路：把水滴拆成「上半部尖顶」+「下半部延展体」，分别用 ::before 和 ::after 实现，再叠加 transform 控制形变节奏。

示例结构：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.drop {
  position: relative;
  width: 60px;
  height: 80px;
}
.drop::before,
.drop::after {
  content: '';
  position: absolute;
  background: #4a90e2;
}
.drop::before {
  /* 上半部：小圆角 + scale 压缩顶部 */
  top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px;
  border-radius: 50% 50% 0 0;
  animation: drop-top 1.2s ease-in-out infinite;
}
.drop::after {
  /* 下半部：大圆角 + vertical stretch */
  top: 30px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 60px;
  border-radius: 0 0 40% 40%;
  animation: drop-bottom 1.2s ease-in-out infinite;
}

::before 负责顶部收缩动画，用 scaleY(0.6) 配合 border-radius 微调，制造“尖而不破”的张力感
::after 负责主体延展，border-radius: 0 0 40% 40% 让底部更饱满，避免出现直角
两个动画的 animation-delay 错开 0.15s，能强化“液态延展”的滞后感

用 clip-path 配合 transition 替代 border-radius 过渡

当需要更精确的水滴轮廓（比如从球形→拉长水滴→触底溅散），clip-path 的 inset() 或 path() 更可控。现代浏览器（Chrome 100+、Firefox 102+、Safari 16.4+）已支持 clip-path: path("...") 的 transition。

关键参数差异：

clip-path: circle(50% at 50% 50%) → 球形起点
clip-path: path("M30,10 Q50,0 70,10 Q80,30 70,50 Q50,80 30,50 Q20,30 30,10") → 手绘水滴路径（需用 SVG path 工具生成）
注意：path() 中坐标单位是像素，必须和元素尺寸严格匹配，否则形变错位
若需兼容旧版 Safari，改用 clip-path: polygon(...) + 多关键帧 animation，但帧数要 ≥ 12 才显平滑