当前位置：首页 > CSS

css制作杯子

2026-01-28 08:30:43CSS

使用CSS绘制杯子

通过CSS的border-radius和box-shadow属性可以创建一个简单的杯子形状。以下是一个基础的杯子设计：

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

.cup {
  width: 100px;
  height: 120px;
  background: #f0f0f0;
  border-radius: 0 0 40px 40px;
  position: relative;
  box-shadow: 0 0 0 5px #333;
}

添加杯子把手

使用伪元素:before或:after来创建杯子的把手：

.cup:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  border: 5px solid #333;
  border-radius: 0 20px 20px 0;
  right: -35px;
  top: 20px;
}

杯子内部液体效果

通过另一个元素或伪元素来表现杯子中的液体：

.cup:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 80px;
  background: rgba(100, 150, 255, 0.5);
  border-radius: 0 0 35px 35px;
  bottom: 5px;
  left: 5px;
}

添加热气效果

使用多个box-shadow创建热气上升的动画：

.steam {
  position: absolute;
  width: 5px;
  height: 20px;
  background: #fff;
  border-radius: 10px;
  top: -25px;
  left: 50px;
  animation: steam 2s infinite;
  box-shadow: 
    -20px 0 0 #fff,
    20px 0 0 #fff;
}

@keyframes steam {
  0% {transform: translateY(0) scale(1); opacity: 1;}
  100% {transform: translateY(-20px) scale(0.5); opacity: 0;}
}

完整杯子示例

将所有元素组合起来：

<div class="cup-container">
  <div class="cup">
    <div class="steam"></div>
  </div>
</div>

.cup-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.cup {
  width: 100px;
  height: 120px;
  background: #f0f0f0;
  border-radius: 0 0 40px 40px;
  position: absolute;
  bottom: 0;
  left: 50px;
  box-shadow: 0 0 0 5px #333;
}

.cup:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  border: 5px solid #333;
  border-radius: 0 20px 20px 0;
  right: -35px;
  top: 20px;
}

.cup:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 80px;
  background: rgba(100, 150, 255, 0.5);
  border-radius: 0 0 35px 35px;
  bottom: 5px;
  left: 5px;
}

.steam {
  position: absolute;
  width: 5px;
  height: 20px;
  background: #fff;
  border-radius: 10px;
  top: -25px;
  left: 50px;
  animation: steam 2s infinite;
  box-shadow: 
    -20px 0 0 #fff,
    20px 0 0 #fff;
}

@keyframes steam {
  0% {transform: translateY(0) scale(1); opacity: 1;}
  100% {transform: translateY(-20px) scale(0.5); opacity: 0;}
}

这个示例创建了一个带有把手、液体和热气动画效果的杯子。可以根据需要调整颜色、大小和形状参数。

css制作杯子