css制作水滴
使用CSS制作水滴效果
水滴效果可以通过CSS的border-radius和transform属性实现，结合伪元素增强立体感。以下是两种常见方法：
基础水滴形状
通过椭圆和三角形组合实现水滴轮廓：
.drop {
width: 100px;
height: 100px;
background: #3498db;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
}
.drop::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid #3498db;
}动态水滴效果
添加渐变和动画模拟水滴下落：
.dripping-drop {
width: 80px;
height: 80px;
background: radial-gradient(circle at 30% 30%,
rgba(255,255,255,0.8) 0%,
rgba(52,152,219,0.8) 30%,
#2980b9 100%);
border-radius: 50% 15% 50% 50%;
transform: rotate(-45deg);
position: relative;
animation: drip 2s infinite;
}
@keyframes drip {
0% { transform: rotate(-45deg) scale(1); }
50% { transform: rotate(-45deg) scale(0.8); }
100% { transform: rotate(-45deg) scale(1); }
}3D水滴增强版
使用多重阴影和滤镜提升真实感：
.water-drop {
width: 120px;
height: 120px;
background: rgba(135, 206, 250, 0.6);
border-radius: 60% 70% 50% 70%;
box-shadow:
inset 10px -10px 20px rgba(255,255,255,0.3),
inset -10px 10px 20px rgba(0,0,0,0.1),
20px 20px 40px rgba(0,0,0,0.2);
filter: blur(1px);
transform: rotate(20deg);
}关键点说明：
- 主要依赖
border-radius的不规则值创建不对称形状 - 伪元素用于添加水滴尖部
- 径向渐变模拟光线折射效果
- 动画通过缩放变换实现脉动效果
- 模糊滤镜和多重阴影增强立体感
可根据实际需求调整颜色、尺寸和动画参数，配合JavaScript可实现交互式水滴效果。
