当前位置：首页 > CSS

css制作滴水动画

2026-03-12 01:09:25CSS

使用CSS制作滴水动画

通过CSS的@keyframes和transform属性可以实现逼真的水滴下落效果。以下是一个完整的实现方案：

HTML结构

创建一个简单的HTML容器放置水滴元素：

css制作滴水动画

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

CSS动画代码

水滴下落和涟漪效果的核心样式：

css制作滴水动画

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

.ripple {
  width: 20px;
  height: 10px;
  background: rgba(0, 161, 255, 0.3);
  position: absolute;
  left: 50%;
  top: 150px;
  border-radius: 50%;
  animation: ripple 1.5s linear infinite;
  transform: translateX(-50%);
}

@keyframes drop {
  0% {
    transform: translate(-50%, 0) scale(1, 1);
  }
  80% {
    transform: translate(-50%, 100px) scale(0.8, 1.2);
  }
  90% {
    transform: translate(-50%, 105px) scale(1.2, 0.8);
  }
  100% {
    transform: translate(-50%, 100px) scale(0, 0);
  }
}

@keyframes ripple {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(0.2, 0.2);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(5, 2);
  }
}

进阶优化技巧

增加多个水滴形成连续效果：

.water-drop:nth-child(2) {
  animation-delay: 0.5s;
}
.water-drop:nth-child(3) {
  animation-delay: 1s;
}

添加物理效果增强真实感：

@keyframes drop {
  0% {
    transform: translate(-50%, 0) scale(1);
    filter: brightness(100%);
  }
  50% {
    filter: brightness(130%);
  }
  90% {
    transform: translate(-50%, 100px) scale(0.9);
    filter: brightness(150%);
  }
  100% {
    transform: translate(-50%, 110px) scale(0);
  }
}