使用html生成一段烟花绽放的代码
时间: 2023-08-27 09:03:48 浏览: 52
以下是一段 HTML 代码,可以生成烟花绽放的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花绽放</title>
<style>
body {
background-color: black;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(30);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework() {
// 生成烟花
var firework = document.createElement("div");
firework.classList.add("firework");
firework.style.left = Math.random() * window.innerWidth + "px";
firework.style.top = Math.random() * window.innerHeight + "px";
document.body.appendChild(firework);
// 移除烟花
setTimeout(function() {
firework.remove();
}, 1000);
}
// 每隔1秒生成一个烟花
setInterval(createFirework, 1000);
</script>
</body>
</html>
```
这段代码使用了 HTML、CSS 和 JavaScript,通过创建一个 div 元素来模拟烟花,然后使用 CSS 中的 animation 属性实现了烟花绽放的效果。JavaScript 部分则负责每隔一段时间生成一个新的烟花,并在一定时间后将其移除。最终效果是屏幕上会不断出现、绽放、消失的烟花。