最近眼看着就要到春节了，春节，作为中国最重要的传统节日之一，承载着无数家庭的团圆与祝福。在这个充满喜庆和欢乐的时刻，我尝试用HTML代码创作了一个春节主题的网页，希望通过技术的方式传递节日的温暖与美好。
一、项目思路
既然是春节主题的，那肯定就少不了放烟花，放烟花呢，又肯定是在晚上放，这样才好看，可是一片漆黑的夜晚放烟花是不是少了什么感觉呢？噢！对，是要在有星星点缀的夜空中才更有感觉，如果加上新年喜庆的音乐就更好了，但是还是缺少了什么呀，是什么呢？那当然是新年祝福啦！有了祝福，那当然就要把这些祝福全部成真，那肯定就少不了能够许愿的流星了！因此我也就开始了创作我的HTML，可是直接这么展示感觉少了什么，对呀！我的初衷是能够给五湖四海的陌生朋友都能奉上祝福，因此我又加了个姓名和性别选择的页面。
二、项目实现
这个项目需要用到的只有软件，那就是HbuilderX或者VSCode，我是两者同时使用，联合开发，大家使用自己喜欢的软件也可以的😄
HTML
代码略微解释：
1、<head>部分：
包含了字符集声明（<meta charset="UTF-8">）和视口设置（<meta name="viewport">），确保页面在不同设备上正确显示。
<title>定义了页面标题为“Fireworks”。
2、<body>部分：
（1）包含一个<div>元素，类名为intro，用于显示欢迎信息和用户输入界面。
一个<h1>标签显示“新年快乐！”。
一个<input>用于输入姓名。
一个<select>用于选择性别。
一个<button>用于触发烟花效果。
（2）一个<div>元素，类名为greeting，用于显示个性化的祝福语。
一个<canvas>元素，用于绘制烟花动画。
一个<audio>元素，用于播放背景音乐。
当您需要换成你的音乐时，您只需要把newyear.flac换成您的音频文件就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks</title>
</head>
<body>
<div class="intro">
<h1>新年快乐！</h1>
<input type="text" id="name" placeholder="请输入您的姓名">
<select id="gender">
<option value="先生">先生</option>
<option value="女士">女士</option>
</select>
<button onclick="startFireworks()">开始</button>
</div>
<div class="greeting" id="greeting"></div>
<canvas id="fireworks"></canvas>
<audio id="background-music" loop>
<source src="newyear.flac" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>CSS
代码略微解释：
1、页面布局：
body, html设置为无边距和填充，背景为深红色，字体为Arial。
canvas设置为块级元素，确保其正确显示。
2、intro类：
定义了欢迎界面的样式，包括居中显示、背景颜色、边框和淡入动画效果。
3、按钮和输入框样式：
使用金色边框和背景，增强节日氛围。
4、动画：
@keyframes fadeIn定义了一个淡入动画，用于欢迎界面的显示。
5、祝福弹幕：
.greeting和.blessing类定义了祝福语和弹幕的样式，包括位置、颜色和背景。
在CSS里面，我几乎都是采用了深红色和金色做样式修饰，因为深红比较喜庆且文雅，金色就代表着财源滚滚，并且在一开始打开网页的时候，需要您填写您的姓名和选择性别的方框是渐变显示的，这样显得更加高级一点。
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #8B0000; /* 更深的红色背景 */
font-family: Arial, sans-serif;
}
canvas {
display: block;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-size: 1.2em;
font-family: "Courier New", Courier, monospace; /* 使用更具节日感的字体 */
background: rgba(139, 0, 0, 0.5); /* 红色背景 */
padding: 20px;
border-radius: 10px;
animation: fadeIn 2s ease-in-out; /* 添加淡入动画 */
border: 2px solid gold; /* 金色边框 */
}
.intro h1 {
font-size: 2em;
color: gold;
margin-bottom: 20px;
}
.intro input, .intro select {
padding: 10px;
margin: 10px;
font-size: 1em;
border: 1px solid gold;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
color: white;
}
.intro button {
padding: 10px 20px;
font-size: 1em;
background-color: gold; /* 金色背景 */
color: #8B0000; /* 红色文字 */
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.intro button:hover {
background-color: #FFD700; /* 更亮的金色 */
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.greeting {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: gold;
font-size: 1.5em;
font-weight: bold;
}
.blessing {
position: absolute;
font-size: 1.2em;
color: white;
padding: 10px;
background: rgba(139, 0, 0, 0.8); /* 红色背景 */
border-radius: 5px;
white-space: nowrap;
pointer-events: none; /* 避免遮挡烟花效果 */
border: 1px solid gold; /* 金色边框 */
}
</style>JavaScript
代码略微解释：
1、Canvas动画：
使用canvas元素绘制烟花、流星和星星。
定义了多个类（Firework、Particle、Star、Meteor）来实现烟花、粒子、星星和流星的效果。
2、烟花和流星的生成：
使用setInterval定时生成烟花和流星。
烟花在到达目标高度后爆炸，生成粒子效果。
3、祝福弹幕：
使用createBlessing函数生成祝福语，并通过setInterval定时显示。
祝福语以弹幕形式从右向左移动。
4、页面可见性监听：
使用document.addEventListener('visibilitychange', handleVisibilityChange)监听页面可见性变化，以暂停或恢复动画。
5、背景音乐：
使用<audio>元素播放背景音乐，并在startFireworks函数中触发播放。
1、JavaScript里面的代码，是整个页面的核心，因为它负责绘制烟花、流星、弹幕以及背景那种星星点缀的黑夜的动画，使得整个画面都比较丰富且有趣，并且这个代码不使用一张图片，全靠JavaScript加持。
2、并且在后面我发现当运行到浏览器的时候，当你把浏览器最小化或者打开别的网页的时候，页面里面的动画就一直叠加，当你再打开的时候就会满屏的暴击，浏览器就有可能会崩溃，所以我就加了个监听机制，这样确保在最小化或者打开别的页面的时候，动画是暂停的，但是音乐还是继续播放的，并且是循环播放，这样即不影响效果展示，也能享受音乐。
3、还有就是大家也可以自己加弹幕，就在blessingstext那里面加就可以了，要注意的是最后一条语句后面加不加逗号都可以的，而前面的都要加，这个也是一个要注意的地方。
<script>
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.targetY = Math.random() * canvas.height * 0.5;
this.speedY = -Math.random() * 10 - 5;
this.particles = [];
this.exploded = false;
}
update() {
if (!this.exploded) {
this.y += this.speedY;
if (this.y <= this.targetY) {
this.exploded = true;
this.createParticles();
}
} else {
for (let particle of this.particles) {
particle.update();
}
}
}
draw() {
if (!this.exploded) {
ctx.save();
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
} else {
for (let particle of this.particles) {
particle.draw(ctx);
}
}
}
createParticles() {
for (let i = 0; i < 100; i++) {
this.particles.push(new Particle(this.x, this.y));
}
}
}
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 3 + 1;
this.angle = Math.random() * Math.PI * 2;
this.speed = Math.random() * 5 + 2;
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
this.alpha = 1;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
this.speed *= 0.96;
this.alpha -= 0.01;
}
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 1;
this.twinkleSpeed = Math.random() * 0.05 + 0.01;
this.twinkleDirection = 1;
this.alpha = Math.random();
}
update() {
this.alpha += this.twinkleDirection * this.twinkleSpeed;
if (this.alpha > 1 || this.alpha < 0) {
this.twinkleDirection *= -1;
}
}
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
class Meteor {
constructor() {
this.x = canvas.width;
this.y = Math.random() * canvas.height * 0.2;
this.size = Math.random() * 2 + 1;
this.speedY = Math.random() * 5 + 5;
this.speedX = -(Math.random() * 5 + 5);
this.color = 'yellow';
this.alpha = 1;
this.tail = [];
}
update() {
this.y += this.speedY;
this.x += this.speedX;
this.alpha -= 0.01;
this.tail.push({ x: this.x, y: this.y, size: this.size, alpha: this.alpha });
if (this.tail.length > 20) {
this.tail.shift();
}
}
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
ctx.fill();
for (let i = 0; i < this.tail.length; i++) {
const tailSegment = this.tail[i];
ctx.globalAlpha = tailSegment.alpha;
ctx.beginPath();
ctx.arc(tailSegment.x, tailSegment.y, tailSegment.size, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
}
let fireworks = [];
let blessings = [];
let stars = [];
let meteors = [];
let fireworkInterval;
let meteorInterval;
let blessingInterval;
let animationFrameId;
function createFirework() {
const x = Math.random() * canvas.width;
const y = canvas.height;
fireworks.push(new Firework(x, y));
}
function createStars() {
for (let i = 0; i < 100; i++) {
stars.push(new Star());
}
}
function createMeteor() {
meteors.push(new Meteor());
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let star of stars) {
star.update();
star.draw(ctx);
}
for (let i = meteors.length - 1; i >= 0; i--) {
meteors[i].update();
meteors[i].draw(ctx);
if (meteors[i].alpha <= 0) {
meteors.splice(i, 1);
}
}
for (let i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].draw();
if (fireworks[i].exploded && fireworks[i].particles.every(particle => particle.alpha <= 0)) {
fireworks.splice(i, 1);
}
}
for (let i = blessings.length - 1; i >= 0; i--) {
const blessing = blessings[i];
blessing.x -= 2;
if (blessing.x < -blessing.width) {
document.getElementById(blessing.id).remove();
blessings.splice(i, 1);
} else {
document.getElementById(blessing.id).style.left = `${blessing.x}px`;
}
}
animationFrameId = requestAnimationFrame(animate);
}
function startFireworks() {
const name = document.getElementById('name').value;
const gender = document.getElementById('gender').value;
const greeting = document.getElementById('greeting');
greeting.textContent = `新年快乐，${name}${gender}！`;
document.querySelector('.intro').style.display = 'none';
fireworkInterval = setInterval(createFirework, 300);
meteorInterval = setInterval(createMeteor, 3000);
blessingInterval = setInterval(createBlessing, 2000);
animate();
const music = document.getElementById('background-music');
music.play();
}
function createBlessing() {
const blessingsText = [
"新年快乐，万事如意！",
"祝您在新的一年里身体健康，家庭幸福！",
"新的一年，新的希望，新的开始！",
"祝您事业有成，步步高升！",
"愿您的生活充满阳光和欢笑！",
"新年新气象，愿您新的一年里，好运连连，笑口常开！",
"新年快乐！愿您的新年充满爱与温暖!",
"祝爷爷奶奶/外公外婆福如东海，寿比南山，新年快乐！",
"祝爸爸妈妈身体健康，笑口常开，新年快乐！",
"祝你新年快乐，生活像烟花一样绚烂多彩！",
"祝你新年快乐，生活像烟花一样绚烂多彩！",
"新年快乐！愿你的每一天都像巧克力一样甜蜜！",
"祝你新年快乐，烦恼全跑掉，快乐全来到！",
"祝你新年快乐，越活越年轻，越长越漂亮！",
"新年快乐！愿你的生活像电影一样精彩，结局永远美好！"
];
const text = blessingsText[Math.floor(Math.random() * blessingsText.length)];
const blessingDiv = document.createElement('div');
blessingDiv.classList.add('blessing');
blessingDiv.textContent = text;
blessingDiv.style.top = `${Math.random() * 80 + 10}%`;
blessingDiv.style.left = `${canvas.width}px`;
document.body.appendChild(blessingDiv);
const id = `blessing-${Date.now()}`;
blessingDiv.id = id;
blessings.push({
id: id,
x: canvas.width,
width: blessingDiv.offsetWidth
});
}
function handleVisibilityChange() {
if (document.hidden) {
clearInterval(fireworkInterval);
clearInterval(meteorInterval);
clearInterval(blessingInterval);
cancelAnimationFrame(animationFrameId);
} else {
fireworkInterval = setInterval(createFirework, 300);
meteorInterval = setInterval(createMeteor, 3000);
blessingInterval = setInterval(createBlessing, 2000);
animate();
}
}
document.addEventListener('visibilitychange', handleVisibilityChange);
createStars();
</script>完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #8B0000; /* 更深的红色背景 */
font-family: Arial, sans-serif;
}
canvas {
display: block;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-size: 1.2em;
font-family: "Courier New", Courier, monospace; /* 使用更具节日感的字体 */
background: rgba(139, 0, 0, 0.5); /* 红色背景 */
padding: 20px;
border-radius: 10px;
animation: fadeIn 2s ease-in-out; /* 添加淡入动画 */
border: 2px solid gold; /* 金色边框 */
}
.intro h1 {
font-size: 2em;
color: gold;
margin-bottom: 20px;
}
.intro input, .intro select {
padding: 10px;
margin: 10px;
font-size: 1em;
border: 1px solid gold;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
color: white;
}
.intro button {
padding: 10px 20px;
font-size: 1em;
background-color: gold; /* 金色背景 */
color: #8B0000; /* 红色文字 */
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.intro button:hover {
background-color: #FFD700; /* 更亮的金色 */
}
/* 淡入动画 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 祝福弹幕样式 */
.greeting {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: gold;
font-size: 1.5em;
font-weight: bold;
}
.blessing {
position: absolute;
font-size: 1.2em;
color: white;
padding: 10px;
background: rgba(139, 0, 0, 0.8); /* 红色背景 */
border-radius: 5px;
white-space: nowrap;
pointer-events: none; /* 避免遮挡烟花效果 */
border: 1px solid gold; /* 金色边框 */
}
</style>
</head>
<body>
<div class="intro">
<h1>新年快乐！</h1>
<input type="text" id="name" placeholder="请输入您的姓名">
<select id="gender">
<option value="先生">先生</option>
<option value="女士">女士</option>
</select>
<button onclick="startFireworks()">开始</button>
</div>
<div class="greeting" id="greeting"></div>
<canvas id="fireworks"></canvas>
<audio id="background-music" loop>
<source src="newyear.flac" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.targetY = Math.random() * canvas.height * 0.5;
this.speedY = -Math.random() * 10 - 5;
this.particles = [];
this.exploded = false;
}
update() {
if (!this.exploded) {
this.y += this.speedY;
if (this.y <= this.targetY) {
this.exploded = true;
this.createParticles();
}
} else {
for (let particle of this.particles) {
particle.update();
}
}
}
draw() {
if (!this.exploded) {
ctx.save();
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
} else {
for (let particle of this.particles) {
particle.draw(ctx);
}
}
}
createParticles() {
for (let i = 0; i < 100; i++) {
this.particles.push(new Particle(this.x, this.y));
}
}
}
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 3 + 1;
this.angle = Math.random() * Math.PI * 2;
this.speed = Math.random() * 5 + 2;
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
this.alpha = 1;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
this.speed *= 0.96;
this.alpha -= 0.01;
}
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 1;
this.twinkleSpeed = Math.random() * 0.05 + 0.01;
this.twinkleDirection = 1;
this.alpha = Math.random();
}
update() {
this.alpha += this.twinkleDirection * this.twinkleSpeed;
if (this.alpha > 1 || this.alpha < 0) {
this.twinkleDirection *= -1;
}
}
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
class Meteor {
constructor() {
this.x = canvas.width; // 从右上角开始
this.y = Math.random() * canvas.height * 0.2; // 随机高度
this.size = Math.random() * 2 + 1;
this.speedY = Math.random() * 5 + 5; // 向下速度
this.speedX = -(Math.random() * 5 + 5); // 向左速度
this.color = 'yellow';
this.alpha = 1;
this.tail = []; // 拖尾效果
}
update() {
this.y += this.speedY;
this.x += this.speedX;
this.alpha -= 0.01; // 减少 alpha 的速度
// 添加当前位置到拖尾数组
this.tail.push({ x: this.x, y: this.y, size: this.size, alpha: this.alpha });
// 移除旧的拖尾部分
if (this.tail.length > 20) {
this.tail.shift();
}
}
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// 添加光晕效果
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
ctx.fill();
// 绘制拖尾效果
for (let i = 0; i < this.tail.length; i++) {
const tailSegment = this.tail[i];
ctx.globalAlpha = tailSegment.alpha;
ctx.beginPath();
ctx.arc(tailSegment.x, tailSegment.y, tailSegment.size, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
}
let fireworks = [];
let blessings = [];
let stars = [];
let meteors = [];
let fireworkInterval;
let meteorInterval;
let blessingInterval;
let animationFrameId;
function createFirework() {
const x = Math.random() * canvas.width;
const y = canvas.height;
fireworks.push(new Firework(x, y));
}
function createStars() {
for (let i = 0; i < 100; i++) {
stars.push(new Star());
}
}
function createMeteor() {
meteors.push(new Meteor());
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新星星
for (let star of stars) {
star.update();
star.draw(ctx);
}
// 更新流星
for (let i = meteors.length - 1; i >= 0; i--) {
meteors[i].update();
meteors[i].draw(ctx);
if (meteors[i].alpha <= 0) {
meteors.splice(i, 1);
}
}
// 更新烟花
for (let i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].draw();
if (fireworks[i].exploded && fireworks[i].particles.every(particle => particle.alpha <= 0)) {
fireworks.splice(i, 1);
}
}
// 更新弹幕
for (let i = blessings.length - 1; i >= 0; i--) {
const blessing = blessings[i];
blessing.x -= 2; // 弹幕移动速度
if (blessing.x < -blessing.width) {
document.getElementById(blessing.id).remove();
blessings.splice(i, 1);
} else {
document.getElementById(blessing.id).style.left = `${blessing.x}px`;
}
}
animationFrameId = requestAnimationFrame(animate);
}
function startFireworks() {
const name = document.getElementById('name').value;
const gender = document.getElementById('gender').value;
const greeting = document.getElementById('greeting');
greeting.textContent = `新年快乐，${name}${gender}！`;
document.querySelector('.intro').style.display = 'none';
fireworkInterval = setInterval(createFirework, 300);
meteorInterval = setInterval(createMeteor, 3000); // 每3秒生成一个流星
blessingInterval = setInterval(createBlessing, 2000); // 每2秒生成一条祝福
animate();
// 播放音乐
const music = document.getElementById('background-music');
music.play();
}
// 祝福弹幕
function createBlessing() {
const blessingsText = [
"新年快乐，万事如意！",
"祝您在新的一年里身体健康，家庭幸福！",
"新的一年，新的希望，新的开始！",
"祝您事业有成，步步高升！",
"愿您的生活充满阳光和欢笑！",
"新年新气象，愿您新的一年里，好运连连，笑口常开！",
"新年快乐！愿您的新年充满爱与温暖!",
"祝爷爷奶奶/外公外婆福如东海，寿比南山，新年快乐！",
"祝爸爸妈妈身体健康，笑口常开，新年快乐！",
"祝你新年快乐，生活像烟花一样绚烂多彩！",
"祝你新年快乐，生活像烟花一样绚烂多彩！",
"新年快乐！愿你的每一天都像巧克力一样甜蜜！",
"祝你新年快乐，烦恼全跑掉，快乐全来到！",
"祝你新年快乐，越活越年轻，越长越漂亮！",
"新年快乐！愿你的生活像电影一样精彩，结局永远美好！"
];
const text = blessingsText[Math.floor(Math.random() * blessingsText.length)];
const blessingDiv = document.createElement('div');
blessingDiv.classList.add('blessing');
blessingDiv.textContent = text;
blessingDiv.style.top = `${Math.random() * 80 + 10}%`;
blessingDiv.style.left = `${canvas.width}px`;
document.body.appendChild(blessingDiv);
const id = `blessing-${Date.now()}`;
blessingDiv.id = id;
blessings.push({
id: id,
x: canvas.width,
width: blessingDiv.offsetWidth
});
}
function handleVisibilityChange() {
if (document.hidden) {
// 页面不可见时暂停动画
clearInterval(fireworkInterval);
clearInterval(meteorInterval);
clearInterval(blessingInterval);
cancelAnimationFrame(animationFrameId);
} else {
// 页面可见时恢复动画
fireworkInterval = setInterval(createFirework, 300);
meteorInterval = setInterval(createMeteor, 3000);
blessingInterval = setInterval(createBlessing, 2000);
animate();
}
}
// 监听页面可见性变化
document.addEventListener('visibilitychange', handleVisibilityChange);
createStars();
</script>
</body>
</html>三、项目成果
图片
视频
HTML-新年烟花祝福页面
