帮我生成一个HTML生日祝福页面,要求开场为烟花,看起来有站在地上仰看烟花的真实效果,并且要求播放烟花为5秒结束后有一个烟花升到空中出现“李莹莹生日快乐”
时间: 2024-04-10 21:28:59 浏览: 18
好的,我可以帮您生成一个带有烟花效果和生日祝福的HTML页面。以下是生成的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>生日祝福</title>
<style>
body {
background-color: black;
overflow: hidden;
}
#fireworks-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFD700;
animation: explode 5s forwards;
}
@keyframes explode {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(30);
}
}
#message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
}
</style>
</head>
<body>
<div id="fireworks-container"></div>
<div id="message">李莹莹生日快乐</div>
<script>
function createFirework() {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * 100 + '%';
firework.style.top = Math.random() * 100 + '%';
document.getElementById('fireworks-container').appendChild(firework);
}
function startFireworks() {
for (var i = 0; i < 50; i++) {
setTimeout(createFirework, Math.random() * 5000);
}
}
startFireworks();
</script>
</body>
</html>
```
您可以将上述代码保存为一个名为 "birthday.html" 的文件,然后在浏览器中打开该文件,即可看到带有烟花效果和生日祝福的页面。请注意,烟花效果是随机生成的,每次打开页面可能会有不同的效果。祝您朋友生日快乐!