好看的生日蛋糕代码html
时间: 2023-12-22 11:28:22 浏览: 126
以下是一个利用纯HTML5+CSS3制作的生日蛋糕的代码,包括底部蛋糕、顶层蛋糕和蜡烛部分的布局和样式调整:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生日蛋糕</title>
<style>
body {
background-color: #f5f5f5;
}
.cake {
position: relative;
margin: 0 auto;
width: 300px;
height: 400px;
background-color: #f9cda9; border-radius: 10px;
box-shadow: 0 0 10px #f9cda9;
overflow: hidden;
}
.cake:before {
content: "";
position: absolute;
top: -20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-color: #f9cda9;
border-radius: 50%;
box-shadow: 0 0 10px #f9cda9;
}
.cake:after {
content: "";
position: absolute;
top: -30px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #f9cda9;
}
.cake .bottom {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
background-color: #f7b99e;
border-radius: 50% 50% 0 0;
box-shadow: 0 0 10px #f7b99e;
transform: rotate(-3deg);
}
.cake .top {
position: absolute;
top: 0;
left: 50%;
margin-left: -120px;
width: 240px;
height: 180px;
background-color: #f7b99e;
border-radius: 50% 50% 0 0;
box-shadow: 0 0 10px #f7b99e;
transform: rotate(3deg);
}
.cake .candle {
position: absolute;
top: -70px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 70px;
background-color: #fff;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 10px #f9cda9;
transform: rotate(-3deg);
}
.cake .candle:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #f9cda9;
}
.cake .candle:after {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 50px;
height: 50px;
background-color: #f9cda9;
border-radius: 50%;
box-shadow: 0 0 10px #f9cda9;
}
</style>
</head>
<body>
<div class="cake">
<div class="bottom"></div>
<div class="top"></div>
<div class="candle"></div>
</div>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)