新年煙花是慶祝新年的傳統(tǒng)活動(dòng)之一，在這個(gè)特別的日期迎接新一年的到來(lái)，煙花的繽紛絢麗是不可缺少的元素。那么如何用HTML代碼實(shí)現(xiàn)新年煙花效果呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New Year Fireworks</title>
<style>
* {margin: 0; padding: 0;}
body {background-color: black;}
.firework {position: absolute; animation: explode 2s ease-in-out forwards;}
.firework:before {content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; border-radius: 50%; background-color: yellow; transform: scale(0);}
@keyframes explode {
0% {transform: scale(0);}
30% {transform: scale(1);}
70% {transform: scale(1.5);}
100% {transform: scale(2); opacity: 0;}
}
</style>
</head>
<body>
<script>
for(let i = 0; i < 30; i++) {
let firework = document.createElement('div');
firework.className = 'firework';
firework.style.top = Math.random() * window.innerHeight + 'px';
firework.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(firework);
}
</script>
</body>
</html>以上代碼實(shí)現(xiàn)了30個(gè)彩色煙花的效果。我們通過(guò)CSS的keyframes屬性來(lái)實(shí)現(xiàn)煙花的綻放效果，并在JavaScript中動(dòng)態(tài)生成煙花的div元素，設(shè)置其隨機(jī)位置，最終呈現(xiàn)出繽紛炫目的新年氛圍。希望此代碼能夠給你帶來(lái)新年的祝福和歡樂(lè)！
上一篇用dw做css定位代碼
下一篇docker與其他不沖突