一個簡單的html放煙花特效的代碼

雲端運算與程式碼 2023年05月11日 16:32 1.4K+ 訪客

以下是一個簡單的html放煙花特效的代碼：

```html

一個簡單的html放煙花特效的代碼第1张

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放煙花特效</title>
<style>
body {
background-color: #1d1f21;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.firework {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f2f2f2;
animation: explosion 1s ease-out;
}
@keyframes explosion {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(3);
opacity: 0.5;
}
100% {
transform: scale(5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<script>
function fireworks() {
for (var i = 0; i < 100; i++) {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.top = (Math.random() * 100) + '%';
firework.style.left = (Math.random() * 100) + '%';
document.body.appendChild(firework);
}
setTimeout(function() {
var fireworks = document.querySelectorAll('.firework');
for (var i = 0; i < fireworks.length; i++) {
document.body.removeChild(fireworks[i]);
}
}, 2000);
}
setInterval(fireworks, 3000);
</script>
</div>
</body>
</html>

```

代碼說明：

1. 使用html和css定義了一個煙花的基本樣式；

2. 使用javascript動態生成多個煙花元素，並使用animation讓其展開，模擬煙花爆炸效果；

3. 使用setTimeout函數控制煙花爆炸持續時間，並使用setInterval控制煙花爆炸的觸發時間間隔。