以下是一個 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 實現動態雪景或閃爍燈光 🌟
【20250630】)