写一段放烟花的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
原文地址: https://www.cveoy.top/t/topic/haHd 著作权归作者所有。请勿转载和采集!