html生日快乐爆开烟花
时间: 2024-02-20 17:54:31 浏览: 39
以下是一个使用HTML5实现生日快乐爆开烟花的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>生日快乐爆开烟花</title>
<style>
body {
background-color: black;
overflow: hidden;
}
#fireworks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="fireworks"></div>
<script>
function createFirework() {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * 100 + 'vw';
firework.style.animationDuration = Math.random() * 2 + 1 + 's';
firework.style.animationDelay = Math.random() * 2 + 's';
document.getElementById('fireworks').appendChild(firework);
}
setInterval(createFirework, 500);
</script>
</body>
</html>
```
这段代码使用了HTML5和CSS3的动画特性来实现生日快乐爆开烟花的效果。通过创建多个div元素,并设置不同的位置、动画持续时间和延迟时间,使得这些元素在页面上以不同的速度和时间爆炸。通过将这些div元素添加到id为"fireworks"的容器中,就可以实现生日快乐爆开烟花的效果。