HTML5结合JavaScript和CSS可以创建一个夜景放烟花的动画。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.sky {
position: relative;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
.fireworks {
position: absolute;
top: 10%;
left: 50%;
width: 1px;
height: 1px;
border-radius: 50%;
background: #ffc107;
opacity: 0;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="sky">
<div class="fireworks" id="fireworks"></div>
</div>
<script>
function createFirework(x, y, color) {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = x + 'px';
firework.style.top = y + 'px';
firework.style.background = color;
document.body.appendChild(firework);
setTimeout(function() {
firework.remove();
}, 300);
}
function createFireworks() {
var sky = document.querySelector('.sky');
var fireworks = document.getElementById('fireworks');
var x = Math.random() * window.innerWidth;
var y = Math.random() * window.innerHeight;
var color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';
sky.style.background = color;
fireworks.style.left = x + 'px';
fireworks.style.top = y + 'px';
fireworks.style.opacity = 1;
setTimeout(function() {
fireworks.style.opacity = 0;
}, 500);
for (var i = 0; i < 30; i++) {
setTimeout(function() {
createFirework(x, y, color);
}, i * 20);
}
}
function random(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
setInterval(createFireworks, 5000);
</script>
</body>
</html>这段代码会每5秒钟在随机位置创建一个由小火焰构成的大火花，并且根据随机颜色改变夜空背景。每个小火焰在屏幕上持续短暂的闪烁后消失。这个示例提供了一个简单的火焰发射机制，可以通过扩展来添加更复杂的特效。