以下是一个 HTML5 实现的圣诞主题网站源码，使用了 HTML5 和 CSS3 技术，界面美观、节日氛围浓厚。它包括：
- 圣诞树动画 🎄
- 雪花飘落特效 ❄️
- 圣诞祝福语 🎁
- 响应式布局，适配移动端
你可以将代码保存为 index.html 文件并在浏览器中打开查看效果。
✅ 完整 HTML5 圣诞节网站源码
html深色版本
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>圣诞快乐 - 梦幻节日网站</title>
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet">
<style>
/* Reset & Basic Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Mountains of Christmas', cursive;
background-color: #f4f4f4;
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
.snowflake {
position: fixed;
top: -10px;
color: #fff;
font-size: 1em;
user-select: none;
pointer-events: none;
z-index: 9999;
animation-name: fall;
animation-timing-function: linear;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
header {
background: url('https://images.unsplash.com/photo-1543700295-920f436c0d52?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.hero-text {
z-index: 2;
max-width: 800px;
margin: auto;
padding: 2rem;
}
.hero-text h1 {
font-size: 4rem;
color: #ffeb3b;
text-shadow: 2px 2px 4px #000;
}
.hero-text p {
font-size: 1.5rem;
margin-top: 1rem;
color: #ffe0b2;
}
section {
padding: 4rem 2rem;
background-color: #2e7d32;
text-align: center;
}
section h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
.tree {
font-size: 100px;
line-height: 1;
color: #00c853;
text-shadow: 2px 2px 5px #000;
}
.gift {
margin-top: 2rem;
font-size: 4rem;
}
footer {
background-color: #1b5e20;
padding: 1rem 0;
text-align: center;
font-size: 1rem;
}
@media (max-width: 768px) {
.hero-text h1 {
font-size: 2.5rem;
}
.hero-text p {
font-size: 1.1rem;
}
.tree {
font-size: 60px;
}
.gift {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<!-- 背景雪花 -->
<script>
// 创建雪花元素
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄️';
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.fontSize = Math.random() * 20 + 10 + 'px';
snowflake.style.animationDuration = 5 + Math.random() * 5 + 's';
snowflake.style.opacity = Math.random();
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 10000); // 删除雪花
}
setInterval(createSnowflake, 300); // 每隔一段时间生成雪花
</script>
<!-- 头部圣诞图片 -->
<header>
<div class="hero-text">
<h1>🎄 圣诞快乐！🎁</h1>
<p>愿你在这个圣诞节收获满满的爱与温暖，祝你和家人幸福安康，新年万事如意！</p>
</div>
</header>
<!-- 圣诞内容 -->
<section>
<div class="tree">
🎄<br>
🌿<br>
🍬<br>
🎁
</div>
<h2>感谢你的陪伴</h2>
<p class="gift">今年我最想送你的礼物是——平安喜乐，心想事成！</p>
</section>
<!-- 底部版权 -->
<footer>
© 2025 圣诞节快乐 | 网站由你打造 ❤️
</footer>
</body>
</html>
📦 使用说明：
- 将以上代码复制并保存为
index.html。 - 在浏览器中打开即可看到一个漂亮的圣诞主题网页。
- 可部署到 GitHub Pages、Netlify 或其他静态网站托管平台。
🧸 可选扩展功能（如需增强）：
- 添加背景音乐 🎵
- 添加倒计时功能 🕒
- 加入交互按钮（“发送祝福”、“圣诞贺卡”等）
- 使用 JavaScript 实现动态雪景或闪烁灯光 🌟