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;
}进阶技巧
-
贝塞尔曲线：使用
cubic-bezier()优化运动轨迹animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); -
3D效果：添加透视变形
transform: translateY(100px) perspective(500px) rotateX(30deg); -
SVG结合：用SVG绘制复杂水滴形状，通过CSS控制动画
完整示例需配合HTML结构：
<div class="water-drop">
<div class="drop"></div>
<div class="ripple"></div>
</div>
