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