当前位置：首页 > CSS

css怎么制作水滴

2026-04-01 23:00:21CSS

使用CSS制作水滴效果

通过CSS的border-radius和transform属性可以创建逼真的水滴形状，结合伪元素和阴影增强立体感。

基础水滴形状

.droplet {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #6ab7ff;
  position: relative;
}

关键点在于非对称的border-radius值，上部比下部略扁平，模拟水滴受重力拉伸的效果。

添加高光效果

.droplet::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  top: 15px;
  left: 25px;
}

通过伪元素创建椭圆形高光，透明度设置为50%更显自然。

动态水滴动画

.droplet {
  animation: drip 3s infinite;
}

@keyframes drip {
  0%, 20% { transform: translateY(0) scale(1); }
  30% { transform: translateY(0) scale(0.9); }
  40% { transform: translateY(0) scale(1.1); }
  50%, 100% { transform: translateY(200px) scale(0.5); }
}

动画模拟水滴下落过程：先收缩准备，然后拉伸下落，最后缩小消失。

进阶3D效果

.droplet {
  box-shadow: 
    inset 10px 10px 10px rgba(255,255,255,0.2),
    inset -10px -10px 10px rgba(0,0,0,0.1);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

内阴影创造体积感，外阴影增强立体效果。通过调整阴影参数可控制光线角度。

css怎么制作水滴

完整实现示例

<div class="droplet"></div>

<style>
.droplet {
  width: 120px;
  height: 120px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(to bottom, #6ab7ff, #3894ff);
  position: relative;
  animation: drip 2.5s ease-in-out infinite;
  box-shadow: 
    inset 15px 15px 15px rgba(255,255,255,0.2),
    inset -15px -15px 15px rgba(0,0,0,0.1);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

.droplet::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  top: 20px;
  left: 35px;
  transform: rotate(20deg);
}

@keyframes drip {
  0%, 20% { transform: translateY(0) scale(1); }
  30% { transform: translateY(0) scale(0.95); }
  40% { transform: translateY(0) scale(1.05); }
  50%, 100% { 
    transform: translateY(150px) scale(0.8); 
    opacity: 0.8;
  }
}
</style>

该示例包含渐变背景、动态光影和流畅动画，适合作为网页动态元素使用。调整尺寸、颜色和动画参数可获得不同风格的水滴效果。