css制作杯子
CSS 制作杯子
使用纯CSS可以创建一个简单的杯子图形，主要通过边框、圆角和阴影等属性实现。以下是具体实现方法：
杯身部分
杯身可以通过矩形和圆角实现：
.cup {
width: 100px;
height: 120px;
background: #f5f5f5;
border: 3px solid #333;
border-radius: 0 0 20px 20px;
position: relative;
}杯柄部分
使用伪元素创建杯柄：
.cup::before {
content: "";
position: absolute;
right: -30px;
top: 20px;
width: 15px;
height: 50px;
background: #f5f5f5;
border: 3px solid #333;
border-left: none;
border-radius: 0 10px 10px 0;
}液体效果
使用伪元素创建液体：
.cup::after {
content: "";
position: absolute;
top: 10px;
left: 5px;
right: 5px;
bottom: 5px;
background: rgba(100, 150, 255, 0.5);
border-radius: 0 0 15px 15px;
}热气效果（可选）
使用多个span元素创建热气动画：
.steam {
position: absolute;
top: -20px;
left: 50%;
width: 5px;
height: 20px;
background: #fff;
border-radius: 5px;
animation: steam-animation 2s infinite;
}
@keyframes steam-animation {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-30px) scale(0.5); opacity: 0; }
}完整HTML结构
<div class="cup">
<div class="steam"></div>
<div class="steam" style="left: 40%; animation-delay: 0.5s;"></div>
<div class="steam" style="left: 60%; animation-delay: 1s;"></div>
</div>进阶效果
可以通过添加CSS渐变和阴影增强真实感：
.cup {
background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}这些CSS技巧组合起来可以创建一个简单但有视觉效果的杯子图形，通过调整尺寸、颜色和动画参数可以获得不同风格的杯子效果。
