以下是一个 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 实现动态雪景或闪烁灯光 🌟