当前位置：首页 > CSS

css制作蛋糕

2026-02-13 05:12:59CSS

CSS 制作蛋糕

使用CSS可以创建简单的蛋糕图形，主要通过div元素和CSS样式（如border-radius、box-shadow、gradient等）实现。以下是实现步骤和代码示例：

蛋糕主体结构

通过多个嵌套的div模拟蛋糕的层次感，每层使用不同的颜色和圆角：

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

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

.top, .middle, .bottom {
  position: absolute;
  width: 100%;
  border-radius: 50%;
}

.top {
  height: 40px;
  background: #ffccf2;
  top: 0;
  z-index: 3;
}

.middle {
  height: 60px;
  background: #ffb3e6;
  top: 30px;
  z-index: 2;
}

.bottom {
  height: 80px;
  background: #ff99d9;
  top: 80px;
  z-index: 1;
}

添加装饰

使用伪元素或额外元素模拟糖霜、蜡烛等装饰：

/* 糖霜效果 */
.top::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background: white;
  border-radius: 50%;
  bottom: -5px;
  opacity: 0.7;
}

/* 蜡烛 */
.candle {
  position: absolute;
  width: 10px;
  height: 40px;
  background: #ff6b6b;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

.candle::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 5px;
  background: #ffd166;
  top: -5px;
  left: -2.5px;
  border-radius: 2px;
}

动画效果

通过CSS动画让蜡烛火焰闪烁：

.candle::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background: #ff9e00;
  top: -15px;
  left: -3px;
  border-radius: 50% 50% 20% 20%;
  animation: flicker 1s infinite alternate;
}

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