一个简单的html放烟花特效的代码
代码
2023年05月11日 16:32
小糯草
以下是一个简单的html放烟花特效的代码：
```html
<!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控制烟花爆炸的触发时间间隔。
专题推荐：
部份内容隐藏请会员登录查看
手机扫一扫，识别二维码，关注本站。
标签： html放烟花特效的代码
相关文章