html 生日快乐蛋糕代码
时间: 2023-08-01 14:07:26 浏览: 236
以下是一份简单的 HTML 生日快乐蛋糕代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>生日快乐!</title>
<style>
body {
background-color: #F7DC6F;
text-align: center;
}
h1 {
font-size: 48px;
margin-top: 50px;
}
#cake {
width: 300px;
height: 400px;
margin: 50px auto 0;
position: relative;
}
.candle {
background-color: #F5B041;
width: 10px;
height: 80px;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
.flame {
background-color: #F5B041;
width: 30px;
height: 30px;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.5), 0 0 70px rgba(255, 255, 255, 0.5);
animation: flicker 1s infinite;
}
@keyframes flicker {
0% {
opacity: 1;
}
80% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.plate {
background-color: #DC7633;
width: 200px;
height: 20px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>生日快乐!</h1>
<div id="cake">
<div class="candle"></div>
<div class="flame"></div>
<div class="plate"></div>
</div>
</body>
</html>
```
这段代码会在页面上显示一个黄色背景的“生日快乐!”标题,以及一个有蜡烛和火焰的蛋糕。蜡烛和火焰的效果是用 CSS 实现的,通过 animation 属性实现了火焰的闪烁效果。
阅读全文