如何用css写一个生日蛋糕
时间: 2024-05-03 11:22:40 浏览: 13
首先,我们需要用HTML创建一个包含蛋糕的容器元素:
```html
<div class="cake">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
<div class="layer layer-4"></div>
<div class="candle"></div>
</div>
```
然后,我们可以使用CSS样式来为蛋糕添加颜色和纹理:
```css
.cake {
position: relative;
width: 300px;
height: 350px;
background-color: #ffcc99;
border-radius: 50% 50% 0 0;
overflow: hidden;
}
.layer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
border-radius: 50%;
}
.layer-1 {
background-color: #f5deb3;
}
.layer-2 {
background-color: #e6c9a8;
}
.layer-3 {
background-color: #d2b48c;
}
.layer-4 {
background-color: #c19a6b;
}
.candle {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 100px;
background-color: #f5deb3;
border-radius: 50%;
transform: rotate(-45deg);
box-shadow: 0 0 10px #ffcc99;
}
.candle::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 10px;
height: 10px;
background-color: #ffcc99;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.candle::after {
content: "";
position: absolute;
top: -20px;
left: 50%;
width: 2px;
height: 20px;
background-color: #ffcc99;
transform: translate(-50%);
}
```
最后,我们可以使用JavaScript在蛋糕上添加动画和交互效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)