当前位置：首页 > CSS

css制作咖啡

2026-01-28 06:19:03CSS

使用CSS制作咖啡动画效果

通过CSS的渐变、阴影和动画属性可以模拟一杯热咖啡的效果。以下是实现代码：

.coffee-cup {
  width: 100px;
  height: 120px;
  position: relative;
  background: linear-gradient(to right, #6F4E37, #4B3621);
  border-radius: 5px 5px 20px 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.coffee {
  position: absolute;
  width: 90%;
  height: 70%;
  top: 10%;
  left: 5%;
  background: linear-gradient(to bottom, #3A2C21, #6F4E37);
  border-radius: 10px 10px 0 0;
}

.steam {
  position: absolute;
  width: 10px;
  height: 40px;
  background: white;
  border-radius: 5px;
  opacity: 0.7;
  animation: steam 3s infinite;
}

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

添加咖啡杯把手

为咖啡杯添加一个半圆形把手增强真实感：

.handle {
  position: absolute;
  right: -15px;
  top: 20px;
  width: 30px;
  height: 50px;
  border: 5px solid #4B3621;
  border-radius: 0 15px 15px 0;
  border-left: none;
}

创建咖啡表面热气效果

使用多个蒸汽元素并设置不同的动画延迟：

.steam:nth-child(1) {
  left: 20%;
  animation-delay: 0.5s;
}
.steam:nth-child(2) {
  left: 50%;
  animation-delay: 1s;
}
.steam:nth-child(3) {
  left: 80%;
  animation-delay: 1.5s;
}

完整HTML结构

将CSS与HTML结合使用的完整示例：

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

响应式调整

添加媒体查询使咖啡杯适应不同屏幕尺寸：

@media (max-width: 600px) {
  .coffee-cup {
    width: 80px;
    height: 96px;
  }
  .handle {
    right: -12px;
    width: 24px;
    height: 40px;
  }
}

这些CSS代码创建了一个带有热气动画效果的咖啡杯，可以通过调整颜色、尺寸和动画参数来获得不同的视觉效果。

css制作咖啡