当前位置：首页 > CSS

css制作咖啡

2026-02-27 09:20:39CSS

使用CSS绘制咖啡杯

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

.coffee-cup {
  width: 100px;
  height: 80px;
  background: #3F2616;
  border-radius: 0 0 40px 40px;
  position: relative;
  box-shadow: 0 0 0 6px #3F2616;
}

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

添加咖啡液面效果

通过伪元素和渐变背景模拟咖啡表面的波纹与热气：

.coffee-cup::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 15px;
  background: linear-gradient(
    to bottom,
    #5C3317 0%,
    #6B3E1F 50%,
    #5C3317 100%
  );
  border-radius: 50%;
  top: -10px;
  left: 5%;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

蒸汽动画实现

使用关键帧动画创造上升的蒸汽效果：

.steam {
  position: absolute;
  width: 6px;
  height: 20px;
  background: #FFF;
  border-radius: 10px;
  top: -25px;
  left: 50%;
  opacity: 0;
  animation: steam 3s infinite;
}

@keyframes steam {
  0% { transform: translateY(0) scale(0.3); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}

完整HTML结构示例

将CSS与HTML结合，创建完整的可交互元素：

<div class="coffee-container">
  <div class="coffee-cup">
    <div class="steam" style="left: 30%"></div>
    <div class="steam" style="left: 50%; animation-delay: 0.5s"></div>
    <div class="steam" style="left: 70%; animation-delay: 1s"></div>
  </div>
</div>

响应式调整技巧

通过CSS变量实现尺寸自适应，使图形在不同设备上保持比例：

:root {
  --cup-size: 10vw;
}

.coffee-cup {
  width: var(--cup-size);
  height: calc(var(--cup-size) * 0.8);
  border-radius: 0 0 calc(var(--cup-size) * 0.4) calc(var(--cup-size) * 0.4);
}

这些技术组合可创建从简单到复杂的咖啡主题CSS图形，适用于网页装饰或UI元素设计。通过调整颜色参数和尺寸比例，还能衍生出拿铁、卡布奇诺等不同咖啡品种的视觉效果。

css制作咖啡