css制作滴水动画

使用CSS制作滴水动画

CSS可以通过关键帧动画和变形效果模拟水滴下落的动态过程。以下是两种常见实现方式：

方法一：纯CSS水滴动画

通过@keyframes定义水滴下落、扩散和消失的动画序列：

.drop {
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  animation: drip 2s infinite;
}

@keyframes drip {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(100px) scale(0.8);
  }
  100% {
    transform: translateY(200px) scale(0);
    opacity: 0;
  }
}

方法二：水滴+涟漪效果

增加水波纹扩散效果增强真实感：

.water-drop {
  position: relative;
  width: 100px;
  height: 100px;
}

.drop {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #3498db 60%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 50%;
  animation: fall 1.5s linear infinite;
}

.ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #3498db;
  border-radius: 50%;
  left: 50%;
  top: 120px;
  opacity: 0;
  animation: spread 1.5s infinite;
}

@keyframes fall {
  to { top: 100px; }
}

@keyframes spread {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

关键参数调整建议

• 下落速度：修改animation-duration值（单位秒）
• 水滴大小：调整width/height和scale()值
• 颜色：更改background的色值
• 延迟效果：对多个水滴元素使用animation-delay

.drop:nth-child(2) {
  animation-delay: 0.3s;
}
.drop:nth-child(3) {
  animation-delay: 0.6s;
}

进阶技巧

1. 贝塞尔曲线：使用cubic-bezier()优化运动轨迹

   animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);

2. 3D效果：添加透视变形

   

   transform: translateY(100px) perspective(500px) rotateX(30deg);

3. SVG结合：用SVG绘制复杂水滴形状，通过CSS控制动画

完整示例需配合HTML结构：

<div class="water-drop">
  <div class="drop"></div>
  <div class="ripple"></div>
</div>