动态烟花代码大全html
时间: 2023-09-24 16:06:02 浏览: 70
以下是一个简单的动态烟花代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态烟花</title>
<style type="text/css">
body {
background-color: black;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
</style>
</head>
<body>
<script type="text/javascript">
function createFirework() {
var firework = document.createElement('div');
firework.classList.add('firework');
firework.style.left = Math.random() * 100 + '%';
firework.style.top = Math.random() * 100 + '%';
document.body.appendChild(firework);
setTimeout(function() {
firework.parentNode.removeChild(firework);
}, 1000);
}
setInterval(createFirework, 100);
</script>
</body>
</html>
```
代码说明:
1. 在 `<head>` 标签中定义了样式,包括背景色、烟花的样式和动画。
2. 在 `<body>` 标签中定义了一个空的页面。
3. 在 `<script>` 标签中定义了一个 `createFirework()` 函数,用于创建烟花元素。
4. 使用 `setInterval()` 函数每隔 100 毫秒调用一次 `createFirework()` 函数,从而不断创建烟花。
5. 创建的烟花元素为一个白色圆点,使用 CSS3 动画 `explode` 实现烟花爆炸效果。
6. 烟花元素的位置是随机的,左边距和上边距都是在 0 到 100 之间的随机数。
7. 使用 `setTimeout()` 函数在 1 秒后删除烟花元素,防止页面卡顿。