html烟花表白代码
时间: 2023-09-14 17:12:36 浏览: 237
以下是一个简单的HTML烟花代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#firework {
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="firework"></div>
<script>
// 创建烟花特效
function createFirework() {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * window.innerWidth + 'px';
document.getElementById('firework').appendChild(firework);
setTimeout(function() {
firework.parentNode.removeChild(firework);
}, 2000);
}
// 每隔一段时间创建新的烟花
setInterval(createFirework, 800);
// 窗口大小改变时重新设置烟花位置
window.onresize = function() {
var fireworks = document.getElementsByClassName('firework');
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].style.left = Math.random() * window.innerWidth + 'px'; }
};
</script>
</body>
</html>
```
将上述代码保存为一个 HTML 文件,然后在浏览器中打开该文件,你将看到烟花特效效果。当页面加载时,每隔一段时间会创建一个新的烟花并在随机位置出现,两秒后消失。当窗口大小改变时,烟花的位置也会重新随机设置。
阅读全文