大家好，今天我要分享一份 HTML 煙花代碼大全。這份代碼大全包含了多種煙花特效的 HTML 代碼，讓你輕松實現漂亮的煙花效果。
<html>
<head>
<title>煙花效果</title>
<style>
/* 定義煙花的顏色 */
.firework {
border-radius: 50%;
background-color: #f00;
}
/* 定義煙花爆炸的動畫效果 */
.firework.small {
animation: explode 1s forwards;
}
.firework.medium {
animation: explode 1.5s forwards;
}
.firework.large {
animation: explode 2s forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(5);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- 在此處插入煙花的代碼 -->
<script>
// 使用 JavaScript 動態創建煙花效果
function createFirework() {
const firework = document.createElement('div');
firework.classList.add('firework');
const size = ['small', 'medium', 'large'][Math.floor(Math.random() * 3)];
firework.classList.add(size);
firework.style.left = `${Math.floor(Math.random() * window.innerWidth)}px`;
firework.style.top = `${Math.floor(Math.random() * window.innerHeight)}px`;
document.body.appendChild(firework);
setTimeout(() =>{
firework.remove();
}, 2000);
}
setInterval(() =>{
createFirework();
}, 500);
</script>
</body>
</html>以上就是這份 HTML 煙花代碼大全的全部內容，你可以直接復制粘貼到你的網頁中使用，實現漂亮的煙花效果。