当前位置：首页 > CSS

css制作咖啡

2026-02-13 00:42:37CSS

使用CSS绘制咖啡杯

通过CSS的伪元素和边框属性可以创建简单的咖啡杯图形。以下代码利用border-radius和box-shadow实现杯体与手柄的立体效果：

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

.coffee-cup {
  width: 100px;
  height: 80px;
  background: #8B4513;
  border-radius: 0 0 50% 50%;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.coffee-cup::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 40px;
  border: 10px solid #8B4513;
  border-radius: 0 20px 20px 0;
  right: -40px;
  top: 10px;
}

添加咖啡液体效果

通过渐变背景模拟杯中咖啡的层次感：

.coffee-cup::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 20px;
  background: linear-gradient(to bottom, #6F4E37, #5C4033);
  border-radius: 50%;
  bottom: 5px;
  left: 5px;
}

制作上升热气动画

使用多个旋转椭圆伪元素配合动画：

.coffee-cup .steam {
  position: absolute;
  width: 10px;
  height: 30px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  top: -35px;
  left: 45px;
  animation: rise 3s infinite;
}

@keyframes rise {
  0% { transform: translateY(0) rotate(15deg); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
}

完整示例组合

将所有元素组合并调整层级关系：

css制作咖啡

<div class="coffee-container">
  <div class="coffee-cup">
    <div class="steam"></div>
    <div class="steam" style="left:60px; animation-delay:0.5s"></div>
  </div>
</div>

.coffee-container {
  perspective: 500px;
  margin: 50px;
}

.coffee-cup {
  /* 基础杯体样式 */
  transform-style: preserve-3d;
  transform: rotateX(15deg);
}

该实现包含三维旋转效果，可通过调整rotateX值改变视角倾斜度。手柄部分采用边框绘制技巧，避免使用额外HTML元素。热气动画使用透明度变化模拟消散效果。