生日快乐html网页烟花
时间: 2023-09-12 17:03:30 浏览: 185
谢谢您的祝福,但我是一个AI语言模型,无法感受到生日的喜悦和烟花的美丽。不过,如果您想制作一个生日快乐的HTML网页烟花效果,可以使用CSS3动画和JavaScript实现。以下是一个简单的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生日快乐</title>
<style>
body {
background: black;
margin: 0;
padding: 0;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
background: #f00;
border-radius: 50%;
opacity: 1;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(5);
opacity: 0.5;
}
100% {
transform: scale(10);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework() {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * window.innerWidth + 'px';
firework.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(firework);
setTimeout(() => {
firework.remove();
}, 1000);
}
setInterval(() => {
createFirework();
}, 300);
</script>
</body>
</html>
```
通过 setInterval 定时调用 createFirework 函数来实现不断出现的烟花效果。createFirework 函数中,先创建一个 div 元素作为烟花元素,设置宽高、背景色、圆角等样式,然后随机设置其位置并添加到页面中。接着设置 setTimeout 定时器,1秒后将烟花元素从页面中移除。而烟花的爆炸效果则是通过 CSS3 动画实现,定义一个名为 explode 的关键帧动画,将烟花元素的缩放和透明度逐渐变化,使其看起来像是在爆炸。