今天我們來(lái)學(xué)習(xí)一下如何用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>現(xiàn)在我們來(lái)解釋一下這些代碼是如何實(shí)現(xiàn)煙花效果的。
首先，在CSS中我們定義了一個(gè)火花的樣式，并使用動(dòng)畫控制它的縮放和透明度變化。
在Javascript中，我們先創(chuàng)建一個(gè)span元素，然后添加上剛剛定義的firework類，隨機(jī)設(shè)置其位置并將其添加到頁(yè)面中。最后，我們通過(guò)setInterval來(lái)讓firework函數(shù)每200毫秒啟動(dòng)一次。
這樣，我們就成功地用HTML代碼制作了煙花效果。
下一篇vue攔截重定向