HTML是一種用來創建網頁的標記語言，它的設計初衷就是為了能夠以一種簡單易學且易于理解的方式來創建頁面。而在這其中，煙花源代碼是一種非常有趣的展示方式，它能夠讓網頁中的煙花從不同的方向飛來飛去，讓頁面變得生動有趣。
<!DOCTYPE html>
<html>
<head>
<title>HTML煙花源代碼</title>
<meta charset="UTF-8">
<style>
body {
background-color: black;
}
.firework {
width: 4px;
height: 4px;
left: 0px;
top: 0px;
border-radius: 50%;
position: absolute;
animation: firework 2s infinite ease;
}
@keyframes firework {
0% {
background-color: white;
box-shadow: 0px 0px 6px white;
}
100% {
background-color: transparent;
box-shadow: 0px 0px 40px rgba(255, 255, 255, 0);
left: calc(100vw * 1.25);
top: calc(100vh * 1.25);
}
}
.firework:nth-child(2) {
animation-delay: 0.2s;
}
.firework:nth-child(3) {
animation-delay: 0.4s;
}
.firework:nth-child(4) {
animation-delay: 0.6s;
}
.firework:nth-child(5) {
animation-delay: 0.8s;
}
</style>
</head>
<body>
<script>
function createFirework() {
let firework = document.createElement('div');
firework.classList.add('firework');
firework.style.top = (Math.floor(Math.random() * 100) + vh) + 'px';
let direction = [1, -1];
let randDirection = direction[Math.floor(Math.random() * direction.length)];
firework.style.left = ((Math.floor(Math.random() * 100) + vw * randDirection) + 'px');
document.body.appendChild(firework);
setTimeout(() => {
firework.remove();
}, 2000);
}
setInterval(createFirework, 500);
</script>
</body>
</html>通過這段代碼，我們使用了CSS3動畫的特性來實現了煙花的動態效果，同時，在JavaScript中也實現了通過向頁面中動態添加元素來顯示煙花效果。整個頁面的背景色為黑色，使煙花更加耀眼。而通過動態計算煙花的位置，讓煙花隨機飛入頁面，在不同的位置綻放。
上一篇docker同時啟動
下一篇html的兼容性怎么設置