生成一个完整的生日祝福html,要求带动态的蛋糕 + 人名+ 年纪。北京黑色
时间: 2024-01-01 22:03:21 浏览: 21
好的,以下是一个带有动态蛋糕、人名和年龄的完整生日祝福 HTML 代码,背景为北京黑色:
```
<!DOCTYPE html>
<html>
<head>
<title>生日祝福</title>
<style>
body {
background: #1E1E1E;
color: #FFF;
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
/* 设置蛋糕的样式 */
.cake {
background: #f9d5e5;
border: 5px solid #f4a8b8;
border-radius: 50%;
height: 200px;
width: 200px;
position: relative;
margin: 0 auto 20px;
}
/* 设置蜡烛的样式 */
.candle {
background: #ffffff;
border: 1px solid #cccccc;
height: 48px;
width: 8px;
position: absolute;
top: -48px;
left: 96px;
transform: rotate(-45deg);
}
/* 设置火花的样式 */
.sparkle {
background: #ffc;
border-radius: 50%;
height: 10px;
width: 10px;
position: absolute;
top: -20px;
left: -20px;
animation: sparkle 0.5s linear infinite alternate;
}
/* 定义火花动画 */
@keyframes sparkle {
from {
opacity: 1;
transform: translate(0, 0);
}
to {
opacity: 0.5;
transform: translate(20px, -20px);
}
}
</style>
</head>
<body>
<div class="cake">
<div class="candle"></div>
<div class="sparkle"></div>
<div class="sparkle"></div>
<div class="sparkle"></div>
<div class="sparkle"></div>
</div>
<h1>生日快乐,{人名}!</h1>
<p>祝您{年龄}岁生日快乐,永远健康、幸福、美丽/英俊!</p>
</body>
</html>
```
请将上面代码中的 `{人名}` 和 `{年龄}` 替换成实际的人名和年龄即可。这个 HTML 代码使用了 CSS3 动画来实现蛋糕上的火花效果,背景为北京黑色。您可以在浏览器中打开查看效果。