跨年祝福网页,新的一年,新的开始!!附源码!!
- 2026-09-25 08:15:42
跨年祝福网页,新的一年,新的开始!!附源码!!应粉丝要求干了一个超级好看的跨年祝福网页！！希望各位网友能喜欢！谢谢！！ 
HTML
效果展示
完整源码
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>2026年全年倒计时 | 记录时光</title><!-- 引入Tailwind CSS --><scriptsrc="https://cdn.tailwindcss.com"></script><!-- 引入字体 --><linkhref="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"rel="stylesheet"><!-- 自定义配置 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#FF3E6C',secondary: '#FFD166',dark: '#0A0E26',star: '#7DDDFA',},fontFamily: {sans: ['Noto Sans SC', 'sans-serif'],},animation: {'snowfall': 'snowfall 20s linear infinite','pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite','float': 'float 6s ease-in-out infinite','countdown': 'countdown 0.5s ease-out',},keyframes: {snowfall: {'0%': { transform: 'translateY(0) rotate(0deg)' },'100%': { transform: 'translateY(100vh) rotate(360deg)' },},float: {'0%, 100%': { transform: 'translateY(0)' },'50%': { transform: 'translateY(-20px)' },},countdown: {'0%': { transform: 'scale(0.8)', opacity: 0 },'100%': { transform: 'scale(1)', opacity: 1 },},},}}}</script><styletype="text/tailwindcss">@layer utilities {.text-gradient {background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.bg-stars {background-image: radial-gradient(circle, theme('colors.star') 1px, transparent 1px);background-size: 50px 50px;}.firework-canvas {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 10;}.snowflake {position: absolute;color: white;opacity: 0.7;user-select: none;z-index: 5;}}</style></head><bodyclass="bg-dark bg-stars min-h-screen overflow-hidden font-sans text-white"><!-- 烟花画布 --><canvasid="fireworkCanvas"class="firework-canvas"></canvas><!-- 雪花容器 --><divid="snowContainer"class="fixed inset-0 pointer-events-none"></div><!-- 主内容容器 --><divclass="relative z-20 flex flex-col items-center justify-center min-h-screen px-4"><!-- 顶部装饰 --><divclass="absolute top-8 left-0 right-0 text-center"><h2class="text-[clamp(1rem,3vw,1.5rem)] font-light text-star animate-pulse-slow">2026年全年倒计时</h2></div><!-- 倒计时区域 --><divid="countdown"class="mb-10 flex flex-wrap justify-center gap-4 md:gap-8"><divclass="countdown-item flex flex-col items-center w-20 md:w-28"><spanid="days"class="text-[clamp(2rem,8vw,4rem)] font-black text-gradient bg-gradient-to-r from-primary to-secondary animate-countdown">00</span><spanclass="mt-2 text-sm md:text-base text-gray-300">天</span></div><divclass="countdown-item flex flex-col items-center w-20 md:w-28"><spanid="hours"class="text-[clamp(2rem,8vw,4rem)] font-black text-gradient bg-gradient-to-r from-primary to-secondary animate-countdown">00</span><spanclass="mt-2 text-sm md:text-base text-gray-300">时</span></div><divclass="countdown-item flex flex-col items-center w-20 md:w-28"><spanid="minutes"class="text-[clamp(2rem,8vw,4rem)] font-black text-gradient bg-gradient-to-r from-primary to-secondary animate-countdown">00</span><spanclass="mt-2 text-sm md:text-base text-gray-300">分</span></div><divclass="countdown-item flex flex-col items-center w-20 md:w-28"><spanid="seconds"class="text-[clamp(2rem,8vw,4rem)] font-black text-gradient bg-gradient-to-r from-primary to-secondary animate-countdown">00</span><spanclass="mt-2 text-sm md:text-base text-gray-300">秒</span></div></div><!-- 2026主视觉 --><divclass="mb-8 animate-float"><h1class="text-[clamp(5rem,20vw,12rem)] font-black text-gradient bg-gradient-to-br from-secondary via-primary to-purple-500 leading-none">2026</h1></div><!-- 新年祝福 --><divclass="text-center max-w-md mx-auto mb-12"><pclass="text-[clamp(1rem,3vw,1.25rem)] text-gray-200 leading-relaxed">愿新年，胜旧年<br>三餐四季，温柔有趣<br>奔赴下一场山海，万事皆可期</p></div><!-- 底部提示 --><divclass="absolute bottom-8 text-sm text-gray-400"><p>自动燃放烟花 · 移动鼠标生成星光 · 点击屏幕额外绽放烟花</p></div><!-- 跨年成功提示（初始隐藏） --><divid="celebration"class="fixed inset-0 flex flex-col items-center justify-center bg-dark/90 z-30 hidden"><h2class="text-[clamp(3rem,15vw,8rem)] font-black text-gradient bg-gradient-to-r from-yellow-300 to-red-500 mb-4">新年快乐！</h2><pclass="text-xl text-gray-200 mb-8">2026，一切皆有可能</p><buttonid="resetBtn"class="px-8 py-3 bg-primary/80 hover:bg-primary rounded-full text-white font-medium transition-all">重新倒计时</button></div></div><script>// 1. 倒计时逻辑const targetDate = new Date('2027-01-01T00:00:00').getTime();let countdownInterval;// 更新倒计时function updateCountdown() {const now = new Date().getTime();const distance = targetDate - now;// 计算时间差const days = Math.floor(distance / (1000 * 60 * 60 * 24));const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((distance % (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');// 倒计时结束if (distance < 0) {clearInterval(countdownInterval);document.getElementById('countdown').classList.add('hidden');document.getElementById('celebration').classList.remove('hidden');// 触发全屏烟花createFirework(targetDate, true);}}// 重置倒计时document.getElementById('resetBtn').addEventListener('click', () => {document.getElementById('celebration').classList.add('hidden');document.getElementById('countdown').classList.remove('hidden');startCountdown();// 重置后重新启动自动烟花setTimeout(autoFirework, 1000);});// 启动倒计时function startCountdown() {updateCountdown();countdownInterval = setInterval(updateCountdown, 1000);}// 2. 雪花生成function createSnowflakes() {const snowContainer = document.getElementById('snowContainer');const snowflakeCount = window.innerWidth / 8; // 根据屏幕宽度调整数量// 清空现有雪花snowContainer.innerHTML = '';for (let i = 0; i < snowflakeCount; i++) {const snowflake = document.createElement('div');snowflake.classList.add('snowflake');// 随机字符（雪花/圆点）const snowChars = ['❄️', '❅', '❆', '•', '✧'];snowflake.innerText = snowChars[Math.floor(Math.random() * snowChars.length)];// 随机样式const size = Math.random() * 10 + 5; // 5-15pxsnowflake.style.fontSize = `${size}px`;snowflake.style.left = `${Math.random() * 100}%`;snowflake.style.top = `${Math.random() * -100}px`;snowflake.style.animationDuration = `${Math.random() * 20 + 10}s`; // 10-30ssnowflake.style.animationDelay = `${Math.random() * 20}s`;snowflake.style.opacity = Math.random() * 0.8 + 0.2; // 0.2-1snowflake.style.animation = `snowfall ${Math.random() * 20 + 10}s linear infinite`;snowContainer.appendChild(snowflake);}}// 3. 烟花动画（Canvas）const canvas = document.getElementById('fireworkCanvas');const ctx = canvas.getContext('2d');let particles = [];// 4. 祝福语弹幕const wishes = ['新年快乐！','2026万事如意！','身体健康，阖家幸福！','事业有成，财源广进！','心想事成，美梦成真！','步步高升，一帆风顺！','岁岁平安，年年有余！','吉星高照，鸿运当头！','笑口常开，好运连连！','青春永驻，美丽常在！','学业进步，前程似锦！','爱情甜蜜，幸福美满！','家庭和睦，邻里和谐！','生意兴隆，财源滚滚！','工作顺利，步步高升！','身体健康，心情愉快！','万事如意，心想事成！','年年有今日，岁岁有今朝！','新年新气象，好运好风光！','恭喜发财，红包拿来！'];// 创建弹幕元素function createWish() {const wishElement = document.createElement('div');wishElement.classList.add('absolute', 'z-20', 'pointer-events-none', 'text-white', 'font-medium');// 随机选择祝福语const wishText = wishes[Math.floor(Math.random() * wishes.length)];wishElement.innerText = wishText;// 随机样式const size = Math.random() * 16 + 12; // 12-28pxwishElement.style.fontSize = `${size}px`;// 随机颜色const colors = ['#FF3E6C', '#FFD166', '#7DDDFA', '#A78BFA', '#F472B6', '#06D6A0', '#118AB2', '#073B4C'];wishElement.style.color = colors[Math.floor(Math.random() * colors.length)];// 随机透明度wishElement.style.opacity = Math.random() * 0.8 + 0.2;// 随机方向（从左到右或从右到左）const direction = Math.random() > 0.5 ? 'left' : 'right';if (direction === 'left') {wishElement.style.left = '-100px';wishElement.style.right = 'auto';} else {wishElement.style.right = '-100px';wishElement.style.left = 'auto';}// 随机垂直位置wishElement.style.top = `${Math.random() * window.innerHeight}px`;// 添加动画const duration = Math.random() * 10 + 5; // 5-15秒const delay = Math.random() * 2; // 0-2秒延迟wishElement.style.transition = `all ${duration}s linear ${delay}s`;// 添加到页面document.body.appendChild(wishElement);// 触发动画setTimeout(() => {if (direction === 'left') {wishElement.style.left = `${window.innerWidth + 100}px`;} else {wishElement.style.right = `${window.innerWidth + 100}px`;}}, 100);// 动画结束后移除元素setTimeout(() => {wishElement.remove();}, (duration + delay) * 1000);}// 自动生成弹幕function autoWish() {createWish();// 随机间隔（0.5-2秒）const randomDelay = Math.random() * 1500 + 500;setTimeout(autoWish, randomDelay);}// 调整Canvas尺寸function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', () => {resizeCanvas();createSnowflakes(); // 重新生成雪花});// 粒子类class Particle {constructor(x, y, color, isCelebration = false) {this.x = x;this.y = y;this.speed = isCelebration ? Math.random() * 8 + 5 : Math.random() * 6 + 2;this.angle = Math.random() * Math.PI * 2;this.gravity = 0.05;this.vx = Math.cos(this.angle) * this.speed;this.vy = Math.sin(this.angle) * this.speed;this.alpha = 1;this.decay = Math.random() * 0.01 + 0.005;this.color = color;this.isCelebration = isCelebration;}update() {// 重力影响this.vy += this.gravity;// 空气阻力this.vx *= 0.98;this.vy *= 0.98;this.x += this.vx;this.y += this.vy;// 透明度衰减this.alpha -= this.decay;}draw() {ctx.save();ctx.globalAlpha = this.alpha;ctx.beginPath();ctx.arc(this.x, this.y, this.isCelebration ? 3 : 2, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();ctx.restore();}}// 创建烟花function createFirework(e, isCelebration = false) {// 坐标处理（点击事件/庆祝模式）let x, y;if (isCelebration) {x = canvas.width / 2;y = canvas.height / 2;// 庆祝模式生成多个烟花for (let i = 0; i < 20; i++) {setTimeout(() => {createSingleFirework(Math.random() * canvas.width,Math.random() * canvas.height,isCelebration);}, i * 100);}} else {x = e.clientX;y = e.clientY;createSingleFirework(x, y, isCelebration);}}// 创建单个烟花function createSingleFirework(x, y, isCelebration) {// 随机颜色const colors = ['#FF3E6C', '#FFD166', '#7DDDFA', '#A78BFA', '#F472B6', '#06D6A0', '#118AB2', '#073B4C'];const color = colors[Math.floor(Math.random() * colors.length)];// 生成粒子数量（增加数量）const particleCount = isCelebration ? 200 : 120;// 创建粒子for (let i = 0; i < particleCount; i++) {particles.push(new Particle(x, y, color, isCelebration));}}// 鼠标移动生成小粒子function createMouseParticles(e) {const x = e.clientX;const y = e.clientY;const color = '#7DDDFA';// 少量小粒子for (let i = 0; i < 3; i++) {particles.push(new Particle(x, y, color, false));particles[particles.length - 1].speed = Math.random() * 2 + 1;particles[particles.length - 1].decay = Math.random() * 0.02 + 0.01;}}// 自动随机燃放烟花function autoFirework() {// 随机生成画布内的坐标（避开边缘，视觉效果更好）const x = Math.random() * (canvas.width - 100) + 50;const y = Math.random() * (canvas.height - 100) + 50;// 30%概率生成更大的烟花，增加视觉层次const isBigFirework = Math.random() > 0.7;// 创建单个烟花createSingleFirework(x, y, isBigFirework);// 随机间隔（0.5-3秒）递归调用，让燃放效果更频繁const randomDelay = Math.random() * 2500 + 500; // 500-3000毫秒setTimeout(autoFirework, randomDelay);}// 动画循环function animate() {// 半透明背景，实现拖影效果ctx.fillStyle = 'rgba(10, 14, 38, 0.1)';ctx.fillRect(0, 0, canvas.width, canvas.height);// 更新和绘制粒子for (let i = particles.length - 1; i >= 0; i--) {const p = particles[i];p.update();p.draw();// 移除透明的粒子if (p.alpha <= 0) {particles.splice(i, 1);}}requestAnimationFrame(animate);}// 初始化window.addEventListener('load', () => {resizeCanvas();startCountdown();createSnowflakes();animate();// 启动自动烟花autoFirework();// 启动自动弹幕autoWish();// 点击生成烟花（保留手动触发）document.addEventListener('click', (e) => createFirework(e));// 鼠标移动生成小粒子document.addEventListener('mousemove', (e) => {// 节流，避免性能问题if (Math.random() > 0.7) {createMouseParticles(e);}});});</script></body></html>
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
