css制作杯子

CSS 制作杯子示例

使用纯CSS可以创建简单的杯子图形，主要通过边框、圆角、渐变等属性实现。以下是两种常见的实现方式：

基础杯形（纯色）

<div class="cup"></div>

.cup {
  width: 100px;
  height: 120px;
  border: 3px solid #333;
  border-radius: 0 0 20px 20px;
  position: relative;
  background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
}

.cup:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 40px;
  border: 3px solid #333;
  border-left: none;
  border-radius: 0 10px 10px 0;
  right: -30px;
  top: 15px;
}

玻璃杯效果（半透明）

.glass-cup {
  width: 80px;
  height: 100px;
  background: rgba(255,255,255,0.3);
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 0 0 15px 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
}

.glass-cup:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 30px;
  border: 2px solid rgba(255,255,255,0.8);
  border-left: none;
  right: -20px;
  top: 15px;
  border-radius: 0 8px 8px 0;
}

液体填充效果

为杯子添加液体层：

.cup::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70%;
  background: #7abaff;
  border-radius: 0 0 18px 18px;
  animation: fill 3s ease-in-out infinite;
}

@keyframes fill {
  0% { height: 10%; }
  50% { height: 70%; }
  100% { height: 10%; }
}

实现要点

• 主体使用圆角矩形（border-radius仅设置底部圆角）
• 杯柄通过伪元素实现，调整边框显示三边
• 玻璃效果依赖半透明颜色和模糊滤镜
• 液体动画使用关键帧控制高度变化

可通过调整尺寸、颜色和阴影效果创建不同风格的杯子。更复杂的3D效果需结合CSS transform属性实现。