css制作蛋糕

使用CSS绘制蛋糕

通过CSS的border-radius、box-shadow和伪元素等特性，可以创建简单的蛋糕图形。以下是一个基础示例：

<div class="cake">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
  <div class="candle"></div>
  <div class="flame"></div>
</div>

.cake {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

/* 蛋糕层 */
.top, .middle, .bottom {
  position: absolute;
  background: #f9c5d1;
  border-radius: 50%;
}

.top {
  width: 120px;
  height: 40px;
  top: 0;
  left: 40px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.middle {
  width: 160px;
  height: 50px;
  top: 30px;
  left: 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.bottom {
  width: 200px;
  height: 60px;
  top: 70px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 蜡烛 */
.candle {
  position: absolute;
  width: 10px;
  height: 30px;
  background: white;
  top: -30px;
  left: 95px;
  z-index: 10;
}

.flame {
  position: absolute;
  width: 15px;
  height: 25px;
  background: #ffef00;
  border-radius: 50% 50% 20% 20%;
  top: -55px;
  left: 92.5px;
  box-shadow: 0 0 20px #ff9900;
  animation: flicker 1s infinite alternate;
}

@keyframes flicker {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

添加装饰细节

通过伪元素或额外HTML元素添加糖霜或装饰：

.middle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.7);
  top: 10px;
  border-radius: 10px;
}

.bottom::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 15px;
  background: #d6a3b8;
  bottom: -5px;
  left: 10px;
  border-radius: 10px;
}

响应式调整

使用CSS变量使蛋糕尺寸可调整：

:root {
  --cake-width: 200px;
  --cake-height: 200px;
}

.cake {
  width: var(--cake-width);
  height: var(--cake-height);
}

@media (max-width: 600px) {
  :root {
    --cake-width: 150px;
    --cake-height: 150px;
  }
}

进阶效果

使用CSS渐变和混合模式增强视觉效果：

.bottom {
  background: linear-gradient(
    to bottom,
    #f9c5d1 0%,
    #e6a8c3 100%
  );
  mix-blend-mode: multiply;
}

通过组合这些技术，可以创建出更复杂的蛋糕设计，包括多层蛋糕、不同口味的颜色搭配以及动态效果。