html烟花代码大全
时间: 2023-12-28 15:24:52 浏览: 36
以下是两个烟花代码的示例:
1. 烟花代码1:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
<style>
body {
background-color: black;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
animation: explode 1s infinite; }
@keyframes explode {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(10);
}
}
</style>
</head>
<body>
<script>
function createFirework() {
var firework = document.createElement("div");
firework.className = "firework";
firework.style.left = Math.random() * window.innerWidth + "px";
firework.style.top = Math.random() * window.innerHeight + "px";
document.body.appendChild(firework);
}
setInterval(createFirework, 500);
</script>
</body>
</html>
```
2. 烟花代码2:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
<style>
body {
background-color: black;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
animation: explode 1s infinite;
}
@keyframes explode {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(10);
}
}
</style>
</head>
<body>
<script>
function createFirework() {
var firework = document.createElement("div");
firework.className = "firework";
firework.style.left = Math.random() * window.innerWidth + "px";
firework.style.top = Math.random() * window.innerHeight + "px";
document.body.appendChild(firework);
}
setInterval(createFirework, 500);
</script>
</body>
</html>
```