css制作滴水动画
使用CSS制作滴水动画
通过CSS的@keyframes和transform属性可以实现逼真的水滴下落效果。以下是一个完整的实现方案：
HTML结构
创建一个简单的HTML容器放置水滴元素：
<div class="water-drop"></div>
<div class="ripple"></div>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);
}
}浏览器兼容性说明
- 现代浏览器均支持此效果
- 如需兼容旧版浏览器，需添加
-webkit-前缀 - 建议配合
will-change: transform属性优化性能
通过调整cubic-bezier时间函数和关键帧比例，可以模拟不同粘稠度液体的下落效果。增加box-shadow属性可创造更立体的水滴视觉效果。
