当前位置：首页 > CSS

css制作滴水动画

2026-04-01 21:17:28CSS

使用CSS制作滴水动画

通过CSS的@keyframes和transform属性可以模拟水滴下落的动画效果。以下是实现方法：

HTML结构

<div class="container">
  <div class="drop"></div>
  <div class="ripple"></div>
</div>

CSS动画代码

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.drop {
  width: 20px;
  height: 20px;
  background: #00a8ff;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 90px;
  animation: drop 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
}

.ripple {
  width: 20px;
  height: 20px;
  background: rgba(0, 168, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 90px;
  animation: ripple 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(100px);
    opacity: 1;
  }
  100% {
    transform: translateY(120px);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

优化滴水效果

为了使水滴效果更逼真，可以添加以下改进：

添加水滴拉伸效果

@keyframes drop {
  0% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(50px) scaleY(0.8);
  }
  80% {
    transform: translateY(100px) scaleY(1.2);
  }
  100% {
    transform: translateY(120px) scaleY(0);
  }
}

添加多个涟漪效果

<div class="container">
  <div class="drop"></div>
  <div class="ripple ripple1"></div>
  <div class="ripple ripple2"></div>
</div>

.ripple1 {
  animation-delay: 0.2s;
}

.ripple2 {
  animation-delay: 0.4s;
}

使用CSS变量控制参数

通过CSS变量可以更方便地调整动画参数：

css制作滴水动画

:root {
  --drop-size: 20px;
  --drop-color: #00a8ff;
  --animation-duration: 1.5s;
}

.drop {
  width: var(--drop-size);
  height: var(--drop-size);
  background: var(--drop-color);
  /* 其余样式保持不变 */
}

这种方法可以轻松修改水滴大小、颜色和动画速度，而无需修改关键帧定义。