当前位置：首页 > CSS

css制作杯子

2026-02-13 02:56:22CSS

使用CSS绘制杯子

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

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

.cup {
  width: 100px;
  height: 120px;
  background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
  border-radius: 0 0 40px 40px;
  position: relative;
  box-shadow: 0 0 0 5px #d1d1d1;
}

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

添加杯内液体效果

通过伪元素和overflow: hidden实现液体效果：

.cup::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 60%;
  background: rgba(100, 180, 250, 0.7);
  border-radius: 0 0 40px 40px;
  bottom: 0;
}

制作3D立体杯子

使用CSS变换和透视效果增强立体感：

.cup {
  transform: perspective(500px) rotateX(15deg);
  transform-style: preserve-3d;
}

.handle {
  transform: translateZ(10px);
}

添加热气动画效果

通过关键帧动画制作热气上升效果：

.cup::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 30px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  top: -20px;
  left: 45px;
  animation: steam 2s infinite ease-out;
}

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

响应式杯子设计

使用CSS变量和视窗单位使杯子尺寸可调整：

css制作杯子

:root {
  --cup-width: 10vw;
  --cup-height: 12vw;
}

.cup {
  width: var(--cup-width);
  height: var(--cup-height);
  border-radius: 0 0 calc(var(--cup-width)/2.5) calc(var(--cup-width)/2.5);
}

这些方法可以组合使用，根据需求调整颜色、尺寸和动画效果，创建不同风格的CSS杯子设计。