当前位置：首页 > CSS

css制作水滴

2026-03-11 16:36:35CSS

使用CSS制作水滴效果

水滴效果可以通过CSS的border-radius和transform属性实现，结合伪元素增强立体感。以下是两种常见方法：

基础水滴形状

通过椭圆和三角形组合实现水滴轮廓：

css制作水滴

.drop {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}
.drop::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #3498db;
}

动态水滴效果

添加渐变和动画模拟水滴下落：

css制作水滴

.dripping-drop {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255,255,255,0.8) 0%, 
    rgba(52,152,219,0.8) 30%, 
    #2980b9 100%);
  border-radius: 50% 15% 50% 50%;
  transform: rotate(-45deg);
  position: relative;
  animation: drip 2s infinite;
}
@keyframes drip {
  0% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(0.8); }
  100% { transform: rotate(-45deg) scale(1); }
}

3D水滴增强版

使用多重阴影和滤镜提升真实感：

.water-drop {
  width: 120px;
  height: 120px;
  background: rgba(135, 206, 250, 0.6);
  border-radius: 60% 70% 50% 70%;
  box-shadow: 
    inset 10px -10px 20px rgba(255,255,255,0.3),
    inset -10px 10px 20px rgba(0,0,0,0.1),
    20px 20px 40px rgba(0,0,0,0.2);
  filter: blur(1px);
  transform: rotate(20deg);
}

关键点说明：