帮我写一个html的烟花网站
时间: 2023-08-01 21:07:04 浏览: 51
好的,下面是一个简单的HTML烟花网站的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
#firework {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
animation: explode 1s ease-out;
}
@keyframes explode {
0% {
transform: scale(0);
}
100% {
transform: scale(25);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework() {
var firework = document.createElement('div');
firework.id = 'firework';
firework.style.left = Math.random() * window.innerWidth + 'px';
firework.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(firework);
setTimeout(function() {
firework.parentNode.removeChild(firework);
}, 1000);
}
setInterval(function() {
createFirework();
}, 500);
</script>
</body>
</html>
```
代码中使用了HTML、CSS和JavaScript实现了一个简单的烟花效果。页面背景设置为黑色,烟花是一个白色的圆形元素,通过CSS中的关键帧动画实现了烟花爆炸的效果。JavaScript中实现了定时器和DOM操作,每500毫秒创建一个新的烟花元素,并在1秒后将其从DOM树中删除。