登录
页面加载白屏深度解析（仅供参考）
2026年1月4日 11:07
一、白屏现象的本质与影响 什么是白屏时间？ 白屏时间指的是从用户发起页面请求（点击链接或输入URL）到浏览器显示首个可视化内容之间的空白期。这段时间内，用户面对的是空白屏幕，等待体验直接影响了用户的第
新年将至，你是否想为亲友制作一个特别的新年祝福页面？今天我们就来一起拆解一个精美的 2026 新年祝福页面的完整实现过程。这个页面包含了加载动画、动态倒计时、雪花特效、悬浮祝福卡片等炫酷效果，完全使用 HTML、CSS 和 JavaScript 实现。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
代码讲解
雪花生成算法
function createSnowflake(container, index) {
const snowflake = document.createElement('div');
// 随机属性：大小、位置、时长
const size = Math.random() * 5 + 2;
const x = Math.random() * 100;
const duration = Math.random() * 10 + 5;
const delay = Math.random() * 5;
// 设置基础样式
snowflake.classList.add('snowflake');
snowflake.style.left = `${x}%`;
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
}
雪花飘落动画
snowflake.animate(
[
{ transform: 'translate(0, -20px) rotate(0deg)' },
{ transform: `translate(${Math.sin(duration)*50}px, 100vh) rotate(90deg)` },
{ transform: `translate(${-Math.sin(duration)*25}px, 100vh) rotate(180deg)` },
{ transform: 'translate(0, 100vh) rotate(360deg)' },
],
{
duration: duration * 1000,
delay: delay * 1000,
iterations: Infinity,
easing: 'linear'
}
);
- 使用 Math.sin()制造左右摆动的飘落路径
- 为每个雪花设置不同的延迟和时长，增加真实感
- 无限循环（Infinity）实现持续飘落
- 响应式设计：根据屏幕宽度调整雪花数量
时间计算逻辑
function updateCountdown() {
const now = new Date();
const newYear = new Date(2026, 0, 1, 0, 0, 0, 0);
const difference = newYear.getTime() - now.getTime();
// 计算天、时、分、秒
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((difference / 1000 / 60) % 60);
const seconds = Math.floor((difference / 1000) % 60);
}
数字格式化
// 两位数格式化
document.getElementById('seconds').textContent =
String(seconds).padStart(2, '0');
- 使用 setInterval(updateCountdown, 1000)实现秒级更新
- padStart()确保始终显示两位数字
- 防抖处理避免性能问题
自定义动画定义
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
@keyframes glow {
0%, 100% {
text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
50% {
text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}
}
一键复制源码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2026新年祝福 - 元旦快乐</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
crossorigin="anonymous" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Tailwind CSS 配置
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#ef4444',
secondary: '#f59e0b',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow-glow {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5);
}
.animate-float {
animation: float 4s ease-in-out infinite;
}
.animate-float-delay-1 {
animation: float 4s ease-in-out 1s infinite;
}
.animate-float-delay-2 {
animation: float 4s ease-in-out 2s infinite;
}
.animate-float-delay-3 {
animation: float 4s ease-in-out 3s infinite;
}
.animate-pulse-soft {
animation: pulseSoft 2s ease-in-out infinite;
}
.animate-fade-in {
animation: fadeIn 1s ease-out forwards;
}
.animate-slide-up {
animation: slideUp 1s ease-out forwards;
}
.animate-slide-up-delay-1 {
animation: slideUp 1s ease-out 0.3s forwards;
}
.animate-slide-up-delay-2 {
animation: slideUp 1s ease-out 0.6s forwards;
}
.animate-slide-up-delay-3 {
animation: slideUp 1s ease-out 0.9s forwards;
}
.animate-scale-in {
animation: scaleIn 0.5s ease-out forwards;
}
.animate-glow {
animation: glow 2s ease-in-out infinite;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
@keyframes pulseSoft {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}
/* 全局样式 */
html, body {
height: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
}
/* 雪花样式 */
.snowflake {
position: absolute;
background-color: white;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* 加载动画 */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #dc2626;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.8s ease-out;
}
.loading-hidden {
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body class="bg-gradient-to-b from-red-800 via-red-700 to-red-900 text-white">
<!-- 加载动画 -->
<div id="loading-screen" class="loading-screen">
<h1 class="text-4xl font-bold text-white" id="loading-text">2026</h1>
</div>
<!-- 主要内容容器 -->
<div class="relative min-h-screen overflow-hidden">
<!-- 雪花容器 -->
<div id="snow-container" class="fixed inset-0 pointer-events-none z-0"></div>
<!-- 装饰星星 -->
<div class="absolute top-10 right-10 w-20 h-20">
<div class="animate-float">
<i class="fa-solid fa-star text-yellow-300 text-4xl animate-pulse-soft"></i>
</div>
</div>
<div class="absolute bottom-20 left-10 w-16 h-16">
<div class="animate-float-delay-1">
<i class="fa-solid fa-star text-yellow-300 text-3xl animate-pulse-soft"></i>
</div>
</div>
<!-- 主要内容 -->
<div class="container mx-auto px-4 py-16 relative z-10">
<!-- 标题部分 -->
<div class="text-center mb-12 opacity-0 animate-slide-up">
<h1
class="text-4xl sm:text-6xl md:text-7xl font-bold mb-4 bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text text-transparent animate-glow">
2026新年快乐！
</h1>
<p class="text-xl sm:text-2xl text-yellow-100 opacity-0" id="subtitle">
愿您新的一年里心想事成，万事如意
</p>
</div>
<!-- 倒计时部分 -->
<div class="text-center mb-16 opacity-0 animate-slide-up-delay-1">
<h2 class="text-2xl sm:text-3xl font-semibold mb-6">距离2026年还有</h2>
<div class="grid grid-cols-4 gap-4 sm:gap-8" id="countdown-container">
<div class="flex flex-col items-center opacity-0">
<div
class="text-3xl sm:text-5xl font-bold text-white bg-gradient-to-r from-red-500 to-amber-500 p-4 sm:p-6 rounded-lg shadow-lg min-w-[80px] sm:min-w-[120px] text-center">
<span id="days">00</span>
</div>
<div class="mt-2 text-white text-xs sm:text-sm">天</div>
</div>
<div class="flex flex-col items-center opacity-0">
<div
class="text-3xl sm:text-5xl font-bold text-white bg-gradient-to-r from-red-500 to-amber-500 p-4 sm:p-6 rounded-lg shadow-lg min-w-[80px] sm:min-w-[120px] text-center">
<span id="hours">00</span>
</div>
<div class="mt-2 text-white text-xs sm:text-sm">时</div>
</div>
<div class="flex flex-col items-center opacity-0">
<div
class="text-3xl sm:text-5xl font-bold text-white bg-gradient-to-r from-red-500 to-amber-500 p-4 sm:p-6 rounded-lg shadow-lg min-w-[80px] sm:min-w-[120px] text-center">
<span id="minutes">00</span>
</div>
<div class="mt-2 text-white text-xs sm:text-sm">分</div>
</div>
<div class="flex flex-col items-center opacity-0">
<div
class="text-3xl sm:text-5xl font-bold text-white bg-gradient-to-r from-red-500 to-amber-500 p-4 sm:p-6 rounded-lg shadow-lg min-w-[80px] sm:min-w-[120px] text-center">
<span id="seconds">00</span>
</div>
<div class="mt-2 text-white text-xs sm:text-sm">秒</div>
</div>
</div>
</div>
<!-- 祝福卡片部分 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16 opacity-0 animate-slide-up-delay-2">
<div class="bg-white/10 backdrop-blur-md p-6 rounded-xl border border-white/20 shadow-xl hover:shadow-yellow-500/20 transition-all transform hover:scale-105 hover:rotate-1 cursor-pointer opacity-0"
id="wish-card-1">
<div class="flex items-center space-x-4">
<div class="text-yellow-400 text-3xl">
<i class="fa-solid fa-heart"></i>
</div>
<p class="text-xl font-medium">身体健康，万事如意</p>
</div>
</div>
<div class="bg-white/10 backdrop-blur-md p-6 rounded-xl border border-white/20 shadow-xl hover:shadow-yellow-500/20 transition-all transform hover:scale-105 hover:-rotate-1 cursor-pointer opacity-0"
id="wish-card-2">
<div class="flex items-center space-x-4">
<div class="text-yellow-400 text-3xl">
<i class="fa-solid fa-heart"></i>
</div>
<p class="text-xl font-medium">事业有成，财源广进</p>
</div>
</div>
<div class="bg-white/10 backdrop-blur-md p-6 rounded-xl border border-white/20 shadow-xl hover:shadow-yellow-500/20 transition-all transform hover:scale-105 hover:-rotate-1 cursor-pointer opacity-0"
id="wish-card-3">
<div class="flex items-center space-x-4">
<div class="text-yellow-400 text-3xl">
<i class="fa-solid fa-heart"></i>
</div>
<p class="text-xl font-medium">家庭幸福，平安顺遂</p>
</div>
</div>
<div class="bg-white/10 backdrop-blur-md p-6 rounded-xl border border-white/20 shadow-xl hover:shadow-yellow-500/20 transition-all transform hover:scale-105 hover:rotate-1 cursor-pointer opacity-0"
id="wish-card-4">
<div class="flex items-center space-x-4">
<div class="text-yellow-400 text-3xl">
<i class="fa-solid fa-heart"></i>
</div>
<p class="text-xl font-medium">心想事成，吉祥如意</p>
</div>
</div>
</div>
<!-- 新年图片 -->
<div
class="relative mx-auto max-w-2xl rounded-2xl overflow-hidden shadow-2xl mb-16 opacity-0 animate-slide-up-delay-3">
<img src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=New%20Year%202026%2C%20celebration%2C%20fireworks%2C%20happy%20people%2C%20chinese%20new%20year%20style&sign=7480eb84f78aa7d9bd5edaf5dc5aad19"
alt="2026新年庆祝"
class="w-full h-auto rounded-2xl transform transition-transform hover:scale-105 duration-700" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
<p class="text-white p-6 text-lg">祝大家2026年元旦快乐！</p>
</div>
</div>
<!-- 按钮部分 -->
<div class="flex flex-wrap justify-center gap-4 opacity-0 animate-slide-up-delay-3">
<button
class="bg-gradient-to-r from-yellow-500 to-amber-500 text-red-900 font-bold py-3 px-8 rounded-full text-lg shadow-lg transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:shadow-yellow-500/20 active:scale-95"
id="share-button">
<i class="fa-solid fa-share-alt mr-2"></i>分享祝福
</button>
<button
class="bg-transparent border-2 border-yellow-500 text-yellow-500 font-bold py-3 px-8 rounded-full text-lg transform transition-all duration-300 hover:bg-yellow-500/10 hover:scale-105 active:scale-95"
id="music-button">
<i class="fa-solid fa-music mr-2"></i>播放音乐
</button>
</div>
<!-- 底部装饰 -->
<div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-red-900 to-transparent opacity-0 animate-fade-in"
id="bottom-decoration"></div>
<!-- 底部文字 -->
<footer class="text-center mt-20 text-white/60 text-sm opacity-0 animate-fade-in" id="footer">
<p>© 2025 新年祝福页面 | 祝您新年快乐，阖家幸福</p>
</footer>
</div>
</div>
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function () {
const loadingScreen = document.getElementById('loading-screen');
const loadingText = document.getElementById('loading-text');
const subtitle = document.getElementById('subtitle');
const countdownItems = document.querySelectorAll('#countdown-container > div');
const wishCards = document.querySelectorAll('[id^="wish-card-"]');
const bottomDecoration = document.getElementById('bottom-decoration');
const footer = document.getElementById('footer');
// 加载文字动画
loadingText.animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1.2)' },
{ transform: 'scale(1)' }
], {
duration: 1000,
iterations: Infinity
});
// 500ms后隐藏加载屏幕，显示主内容
setTimeout(() => {
loadingScreen.classList.add('loading-hidden');
// 显示副标题
setTimeout(() => {
subtitle.classList.add('animate-fade-in');
}, 500);
// 显示倒计时项
countdownItems.forEach((item, index) => {
setTimeout(() => {
item.classList.add('animate-scale-in');
}, 800 + index * 200);
});
// 显示祝福卡片
wishCards.forEach((card, index) => {
setTimeout(() => {
card.classList.add('animate-scale-in');
}, 1600 + index * 200);
});
// 显示底部装饰和页脚
setTimeout(() => {
bottomDecoration.classList.add('animate-fade-in');
}, 2400);
setTimeout(() => {
footer.classList.add('animate-fade-in');
}, 2800);
}, 1000);
// 初始化倒计时
updateCountdown();
setInterval(updateCountdown, 1000);
// 初始化雪花效果
createSnowflakes();
// 按钮事件处理
document.getElementById('share-button').addEventListener('click', function () {
alert('祝福已分享！');
});
document.getElementById('music-button').addEventListener('click', function () {
alert('音乐播放功能即将上线！');
});
});
// 倒计时功能
function updateCountdown() {
const now = new Date();
const newYear = new Date(2026, 0, 1, 0, 0, 0, 0);
const difference = newYear.getTime() - now.getTime();
if (difference > 0) {
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((difference / 1000 / 60) % 60);
const seconds = Math.floor((difference / 1000) % 60);
document.getElementById('days').textContent = String(days).padStart(2, '0');
document.getElementById('hours').textContent = String(hours).padStart(2, '0');
document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
} else {
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
}
}
// 雪花效果
function createSnowflakes() {
const snowContainer = document.getElementById('snow-container');
const particleCount = window.innerWidth < 768 ? 20 : 50;
for (let i = 0; i < particleCount; i++) {
createSnowflake(snowContainer, i);
}
// 窗口大小改变时重新创建雪花
window.addEventListener('resize', function () {
while (snowContainer.firstChild) {
snowContainer.removeChild(snowContainer.firstChild);
}
const newParticleCount = window.innerWidth < 768 ? 20 : 50;
for (let i = 0; i < newParticleCount; i++) {
createSnowflake(snowContainer, i);
}
});
}
function createSnowflake(container, index) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// 随机属性
const size = Math.random() * 5 + 2;
const x = Math.random() * 100;
const duration = Math.random() * 10 + 5;
const delay = Math.random() * 5;
const opacity = Math.random() * 0.5 + 0.3;
// 设置样式
snowflake.style.left = `${x}%`;
snowflake.style.top = '-20px';
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
snowflake.style.opacity = `${opacity}`;
// 添加到容器
container.appendChild(snowflake);
// 创建动画
snowflake.animate(
[
{ transform: 'translate(0, -20px) rotate(0deg)' },
{ transform: `translate(${Math.sin(duration) * 50}px, 100vh) rotate(90deg)` },
{ transform: `translate(${-Math.sin(duration) * 25}px, 100vh) rotate(180deg)` },
{ transform: 'translate(0, 100vh) rotate(360deg)' },
],
{
duration: duration * 1000,
delay: delay * 1000,
iterations: Infinity,
easing: 'linear'
}
);
}
</script>
</body>
</html>
祝大家 2026 年新年快乐，代码无 bug，需求一次过！
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
