你能帮我写一个html格式的烟花代码嘛?
时间: 2024-05-04 18:22:47 浏览: 16
当然可以帮您写一个HTML格式的烟花代码。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花HTML代码</title>
<meta charset="utf-8">
<style>
.firework {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
animation-name: explode;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
transform: translate(-50%, -50%);
opacity: 0;
}
@keyframes explode {
0% {width: 0; height: 0;}
50% {width: 150px; height: 150px; opacity: 1;}
100% {width: 0; height: 0; opacity: 0;}
}
.firework span {
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
animation-name: sparkle;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes sparkle {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}
</style>
</head>
<body>
<button onclick="fire()">点我放烟花</button>
<script>
var container = document.getElementsByTagName('body')[0];
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff'];
function fire() {
var firework = document.createElement('div');
firework.className = 'firework';
for (var i = 0; i < 100; i++) {
var spark = document.createElement('span');
spark.style.top = Math.random() * 150 - 75 + 'px';
spark.style.left = Math.random() * 150 - 75 + 'px';
spark.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
firework.appendChild(spark);
}
container.appendChild(firework);
setTimeout(function() {
firework.parentNode.removeChild(firework);
}, 1000);
}
</script>
</body>
</html>
```
希望对您有所帮助。