生日烟花代码html
时间: 2023-10-11 19:06:31 浏览: 251
以下是一个简单的生日烟花的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>生日烟花</title>
<style>
body {
background: black;
overflow: hidden;
}
.firework {
position: absolute;
width: 4px;
height: 30px;
background-color: #ff8000;
transform-origin: top center;
animation: explode 1s linear infinite;
}
@keyframes explode {
0% {
transform: scale(1, 1) translateY(0);
opacity: 1;
}
100% {
transform: scale(0.1, 3) translateY(-300px);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework() {
const firework = document.createElement('div');
firework.classList.add('firework');
const screenWidth = window.innerWidth;
const randomX = Math.floor(Math.random() * screenWidth);
firework.style.left = randomX + 'px';
document.body.appendChild(firework);
setTimeout(() => {
firework.remove();
}, 2000);
}
setInterval(createFirework, 500);
</script>
</body>
</html>
```
此代码将在页面上制作一个简单的生日烟花效果。每隔500毫秒,将创建一个小的烟花并在2秒后消失。
请注意,此代码仅为演示目的,并且可能需要根据您的实际需求进行调整。
阅读全文