HTML/CSS/JS 生日快乐祝福,生日快乐在线网页祝福 (一场浪漫的烟花秀) 代码
时间: 2024-12-18 08:30:44 浏览: 27
HTML生日快乐祝福网页模板(粉色甜心)
5星 · 资源好评率100%
为了创建一个简单的HTML/CSS/JavaScript在线网页,你可以使用以下代码来展示一场“浪漫的烟花秀”作为生日祝福。这个例子会利用CSS动画和JavaScript交互:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>生日快乐 烟花秀</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
overflow: hidden;
}
.firework {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0);
animation: fireworks 4s linear infinite;
}
@keyframes fireworks {
0% {background-color: transparent;}
50% {background-color: red;}
100% {background-color: transparent; opacity: 0;}
}
</style>
</head>
<body>
<div class="firework"></div>
<script>
// JavaScript部分添加鼠标悬停效果延长烟花显示时间
const firework = document.querySelector('.firework');
firework.addEventListener('mouseover', function() {
this.style.animationDuration = '6s';
});
firework.addEventListener('mouseout', function() {
this.style.animationDuration = '4s';
});
</script>
</body>
</html>
```
在这个示例中,当你打开页面时,中间会出现一个白色圆形,模拟烟花。当鼠标悬停在“烟花”上时,它会停留更长时间。点击“关闭浏览器窗口”或刷新页面后,烟花动画会结束。
阅读全文