今天我們來學習一下如何用HTML代碼制作煙花效果。下面是具體的代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML煙花效果</title>
<meta charset="UTF-8">
<style>
body {
background-color: black;
}
.firework {
width: 6px;
height: 12px;
border-radius: 50%;
position: absolute;
animation: explode 0.5s ease-in;
}
@keyframes explode {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(50);
}
}
</style>
</head>
<body>
<script>
function firework() {
const fire = document.createElement('span');
fire.classList.add('firework');
fire.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(fire);
setTimeout(() =>{
fire.remove();
}, 500);
}
setInterval(firework, 200);
</script>
</body>
</html>現在我們來解釋一下這些代碼是如何實現煙花效果的。
首先，在CSS中我們定義了一個火花的樣式，并使用動畫控制它的縮放和透明度變化。
在Javascript中，我們先創建一個span元素，然后添加上剛剛定義的firework類，隨機設置其位置并將其添加到頁面中。最后，我們通過setInterval來讓firework函數每200毫秒啟動一次。
這樣，我們就成功地用HTML代碼制作了煙花效果。