HTML 烟花动画代码 - 在线观看和使用 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>放烟花</title>
	<style>
		body {
			background-color: black;
			color: white;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 3em;
			margin-top: 50px;
		}
		#firework {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<h1>放烟花</h1>
	<button onclick='fire()'>点燃烟花</button>
	<div id='firework'></div>
	<script>
		function fire() {
			var firework = document.getElementById('firework');
			firework.innerHTML = '';
			var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
			var size = Math.floor(Math.random() * 100) + 50;
			var color = colors[Math.floor(Math.random() * colors.length)];
			var spark = document.createElement('div');
			spark.style.width = size + 'px';
			spark.style.height = size + 'px';
			spark.style.backgroundColor = color;
			spark.style.borderRadius = '50%';
			spark.style.position = 'absolute';
			spark.style.top = '0';
			spark.style.left = '0';
			firework.appendChild(spark);
			var x = Math.floor(Math.random() * 100) + 1;
			var y = Math.floor(Math.random() * 100) + 1;
			var animation = spark.animate([
				{ transform: 'translate(0, 0)' },
				{ transform: 'translate(' + x + 'vw, ' + y + 'vh)' }
			], {
				duration: 2000,
				easing: 'ease-out',
				fill: 'forwards'
			});
			animation.onfinish = function() {
				spark.parentNode.removeChild(spark);
			}
			setTimeout(fire, Math.floor(Math.random() * 300) + 100);
		}
	</script>
</body>
</html>