写一个放烟花的html页面
<!DOCTYPE html>
<html>
<head>
<title>放烟花</title>
<style>
body {
background-color: black;
}
<pre><code> #firework {
position: relative;
width: 100%;
height: 100%;
}
.firework-dot {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}
</style>
</code></pre>
</head>
<body>
<div id="firework"></div>
<pre><code><script>
function createFirework() {
var firework = document.getElementById("firework");
var dot = document.createElement("div");
dot.className = "firework-dot";
dot.style.top = Math.random() * 100 + "%";
dot.style.left = Math.random() * 100 + "%";
dot.style.animationDuration = Math.random() * 2 + 1 + "s";
firework.appendChild(dot);
setTimeout(function() {
firework.removeChild(dot);
}, 3000);
}
setInterval(createFirework, 500);
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hUiB 著作权归作者所有。请勿转载和采集!