好的！这是一个为你制作的新年快乐网页，包含了动态效果、烟花、倒计时和祝福语，希望能给你带来节日的喜悦！
（图片来源网络，侵删）
你可以直接将下面的代码复制到一个文本文件中,将文件后缀名改为 .html，然后用浏览器打开即可看到效果。
新年快乐网页代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新年快乐！</title>
<style>
/* --- 基础样式重置和页面布局 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; /* 使用更现代的字体 */
background: linear-gradient(to bottom, #0c0c2e, #1a1a3e); /* 深蓝色夜空渐变 */
color: #ffffff;
overflow-x: hidden; /* 防止水平滚动条 */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
/* --- 烟花画布 --- */
#fireworks-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 让鼠标事件可以穿透 */
z-index: 1;
}
/* --- 主内容容器 --- */
.main-content {
text-align: center;
z-index: 10; /* 确保内容在烟花之上 */
padding: 20px;
}
/* --- 标题样式 --- */
h1 {
font-size: 5rem; /* 响应式字体大小 */
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.8); /* 金色发光效果 */
background: linear-gradient(to right, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4, #a8e6cf);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradient 3s ease infinite;
letter-spacing: 0.1em;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* --- 倒计时容器 --- */
.countdown-container {
margin: 2rem 0;
font-size: 1.5rem;
}
.countdown {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
.time-box {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 1rem;
min-width: 80px;
backdrop-filter: blur(5px); /* 毛玻璃效果 */
}
.time-box span {
display: block;
font-size: 2rem;
font-weight: bold;
}
/* --- 祝福语 --- */
.greeting {
font-size: 1.8rem;
margin-top: 2rem;
opacity: 0;
animation: fadeIn 2s ease-out 1s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
h1 {
font-size: 3rem;
}
.countdown {
flex-wrap: wrap;
gap: 0.5rem;
}
.time-box {
min-width: 60px;
padding: 0.8rem;
}
.time-box span {
font-size: 1.5rem;
}
.greeting {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<!-- 烟花画布 -->
<canvas id="fireworks-canvas"></canvas>
<!-- 主内容 -->
<div class="main-content">
<h1>新年快乐</h1>
<p class="countdown-container">距离2025年春节还有</p>
<div class="countdown" id="countdown">
<div class="time-box">
<span id="days">00</span>
<span>天</span>
</div>
<div class="time-box">
<span id="hours">00</span>
<span>时</span>
</div>
<div class="time-box">
<span id="minutes">00</span>
<span>分</span>
</div>
<div class="time-box">
<span id="seconds">00</span>
<span>秒</span>
</div>
</div>
<p class="greeting">愿新的一年，平安喜乐，万事顺遂！</p>
</div>
<script>
// --- 倒计时功能 ---
function updateCountdown() {
// 目标日期：2025年春节 (正月初一，2025年1月29日)
const targetDate = new Date("January 29, 2025 00:00:00").getTime();
const now = new Date().getTime();
const difference = targetDate - now;
if (difference > 0) {
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days.toString().padStart(2, '0');
document.getElementById("hours").innerText = hours.toString().padStart(2, '0');
document.getElementById("minutes").innerText = minutes.toString().padStart(2, '0');
document.getElementById("seconds").innerText = seconds.toString().padStart(2, '0');
} else {
// 倒计时结束，显示新年快乐
document.getElementById("countdown").innerHTML = "<h2 style='font-size: 3rem; color: #ffd93d;'>新年快乐！</h2>";
}
}
// 每秒更新一次倒计时
setInterval(updateCountdown, 1000);
updateCountdown(); // 立即执行一次，避免等待1秒
// --- 烟花效果 ---
const canvas = document.getElementById('fireworks-canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 烟花粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.velocity = {
x: (Math.random() - 0.5) * 8,
y: (Math.random() - 0.5) * 8
};
this.alpha = 1;
this.decay = Math.random() * 0.02 + 0.01;
}
update() {
this.velocity.y += 0.05; // 重力
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= this.decay;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
// 烟花类
class Firework {
constructor(x, y, targetX, targetY, color) {
this.x = x;
this.y = y;
this.targetX = targetX;
this.targetY = targetY;
this.color = color;
this.speed = 2;
this.angle = Math.atan2(targetY - y, targetX - x);
this.velocity = {
x: Math.cos(this.angle) * this.speed,
y: Math.sin(this.angle) * this.speed
};
this.brightness = Math.random() * 50 + 50;
this.targetRadius = 1;
}
update() {
this.x += this.velocity.x;
this.y += this.velocity.y;
// 检查是否到达目标位置
const distanceToTarget = Math.sqrt(Math.pow(this.targetX - this.x, 2) + Math.pow(this.targetY - this.y, 2));
if (distanceToTarget < 10) {
createParticles(this.targetX, this.targetY, this.color);
return true; // 表示烟花爆炸，可以移除
}
return false;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.targetRadius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
}
}
let particles = [];
let fireworks = [];
// 创建爆炸粒子
function createParticles(x, y, color) {
const particleCount = 100;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(x, y, color));
}
}
// 随机颜色
function getRandomColor() {
const colors = ['#ff6b6b', '#ffd93d', '#6bcf7f', '#4ecdc4', '#a8e6cf', '#ff8cc8', '#b4a7d6'];
return colors[Math.floor(Math.random() * colors.length)];
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = 'rgba(12, 12, 46, 0.1)'; // 半透明黑色背景，用于拖尾效果
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 随机发射新烟花
if (Math.random() < 0.03) {
const startX = Math.random() * canvas.width;
const startY = canvas.height;
const targetX = Math.random() * canvas.width;
const targetY = Math.random() * canvas.height * 0.5;
fireworks.push(new Firework(startX, startY, targetX, targetY, getRandomColor()));
}
// 更新和绘制烟花
for (let i = fireworks.length - 1; i >= 0; i--) {
if (fireworks[i].update()) {
fireworks.splice(i, 1); // 移除已爆炸的烟花
} else {
fireworks[i].draw();
}
}
// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].draw();
if (particles[i].alpha <= 0) {
particles.splice(i, 1); // 移除已消失的粒子
}
}
}
animate();
</script>
</body>
</html>
网页特点说明
-
视觉设计：
- 夜空背景：使用深蓝色渐变，营造夜晚的节日氛围。
- ：“新年快乐”四个字使用了渐变色彩和动画效果，非常醒目。
- 毛玻璃效果：倒计时框采用了半透明和模糊效果，显得现代且美观。
-
交互功能：
- 动态倒计时：实时显示距离2025年春节（正月初一）的剩余时间，精确到秒，当倒计时归零时，会显示“新年快乐！”。
- 烟花秀：使用Canvas绘制的烟花效果会随机在屏幕上空绽放，颜色绚丽，带有重力和拖尾效果，非常逼真。
-
用户体验：
（图片来源网络，侵删）- 响应式布局：网页会根据不同设备的屏幕尺寸（手机、平板、电脑）自动调整字体大小和布局，确保在任何设备上都有良好的显示效果。
- 流畅动画：所有动画都经过优化，运行流畅，不会造成卡顿。
希望这个网页能为你带来节日的欢乐！
（图片来源网络，侵删）
