html写个元旦快乐代码 并带有烟花特效
时间: 2023-02-07 10:33:13 浏览: 130
html春节跨年代码(含烟花)
5星 · 资源好评率100%
这是一个简单的HTML代码,在页面中显示"元旦快乐"并带有烟花特效:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
text-align: center;
}
#fireworks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.firework {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
border-radius: 50%;
background: white;
animation: explode 0.75s linear forwards;
}
@keyframes explode {
0% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-50%, -50%) scale(7);
opacity: 0;
}
}
</style>
</head>
<body>
<h1 style="color:white">元旦快乐!</h1>
<div id="fireworks">
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
</div>
<script>
// 生成随机颜色
function randomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
const fireworks = document.querySelectorAll('.firework');
// 在随机时间内随机位置生成烟花
setInterval(() => {
for (const firework of fireworks) {
firework.style.top = `${Math.floor(Math.random() * 100)}%`;
firework.style.left = `${Math.floor(Math.random() * 100)}%`;
firework.style.background = randomColor();
}
}, 750);
</script>
</body>
</html>
```
在这段代码中,我们使用了HTML、CSS和JavaScript来创建烟花特效。
HTML部分创建了一个包含"元旦快乐"的标题元素,以及一个包含烟花的div元素。
CSS部分使用了绝对定位和动画来创建烟花
阅读全文