css怎么制作水滴
使用CSS制作水滴效果
水滴效果可以通过CSS的border-radius属性和渐变背景实现。以下是几种常见方法：
基础水滴形状
通过设置不对称的border-radius和旋转效果创建水滴形状：
.droplet {
width: 100px;
height: 100px;
border-radius: 60% 40% 60% 40%;
background: linear-gradient(45deg, #3498db, #2980b9);
transform: rotate(45deg);
}动态水滴动画
添加animation实现水滴颤动效果：
@keyframes droplet {
0%, 100% { border-radius: 60% 40% 30% 70%; }
50% { border-radius: 50% 60% 70% 40%; }
}
.droplet {
animation: droplet 3s infinite ease-in-out;
}3D水滴效果
结合box-shadow和伪元素增强立体感：
.droplet {
position: relative;
box-shadow: inset -10px -10px 20px rgba(0,0,0,0.2);
}
.droplet::after {
content: '';
position: absolute;
top: 20%;
left: 20%;
width: 20%;
height: 20%;
border-radius: 50%;
background: rgba(255,255,255,0.5);
}带阴影的水滴
添加filter: drop-shadow实现投影：
.droplet-container {
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}响应式水滴
使用vw单位实现尺寸自适应：
.droplet {
width: 15vw;
height: 15vw;
max-width: 150px;
max-height: 150px;
}关键技巧：
- 不对称的
border-radius值组合（如60%/40%） - 45度角的线性渐变
- 适当旋转增强水滴自然感
- 高光伪元素增加立体效果
- 柔和阴影提升视觉层次
