下面给你两部分内容,直接可用 👇
① 宣传文案(适合放在网站介绍 / 主页标题)
② 一个「开箱即用」的电脑端全屏圣诞树网页(单文件 HTML)
一、宣传文案(可直接用)
🎄 2025 年最炫酷的圣诞树 🎄
无需安装,打开即用
推荐电脑端访问,按 F11 进入沉浸式全屏体验
主页自动铺满屏幕,灯光、粒子与节日氛围一次到位
这不是一棵普通的圣诞树
而是一场为大屏而生的视觉仪式 ✨
二、开箱即用全屏圣诞树(HTML 单文件)
👉 特点
- 电脑端最佳体验
- 页面加载即全屏视觉布局
- F11 后无滚动条、无边框
- 纯前端,一个文件即可部署(可直接放到 WordPress / Nginx)
使用方式
- 新建
index.html - 复制下面全部代码
- 浏览器打开即可(建议 Chrome / Edge)
- 按 F11 全屏 🎄
示例代码(直接复制)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>2025 最炫酷的圣诞树</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(circle at bottom, #0a1a2f, #000);
font-family: "Segoe UI", Arial, sans-serif;
}
.scene {
position: relative;
width: 100vw;
height: 100vh;
}
.title {
position: absolute;
top: 40px;
width: 100%;
text-align: center;
color: #fff;
font-size: 42px;
letter-spacing: 4px;
text-shadow: 0 0 20px rgba(255,255,255,0.6);
}
.subtitle {
margin-top: 12px;
font-size: 16px;
opacity: 0.8;
}
.tree {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 220px solid transparent;
border-right: 220px solid transparent;
border-bottom: 420px solid #0f8f4f;
filter: drop-shadow(0 0 25px rgba(0,255,160,0.4));
}
.tree::after {
content: "";
position: absolute;
top: 120px;
left: -180px;
width: 0;
height: 0;
border-left: 180px solid transparent;
border-right: 180px solid transparent;
border-bottom: 320px solid #13a85c;
}
.star {
position: absolute;
top: calc(50% - 300px);
left: 50%;
transform: translateX(-50%);
font-size: 48px;
color: gold;
animation: glow 2s infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 10px gold; }
to { text-shadow: 0 0 30px gold; }
}
.snow {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.snow span {
position: absolute;
top: -10px;
color: white;
font-size: 12px;
opacity: 0.8;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(110vh);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="title">
2025 最炫酷的圣诞树
<div class="subtitle">推荐电脑端打开 · F11 全屏体验</div>
</div>
<div class="star">★</div>
<div class="tree"></div>
<div class="snow" id="snow"></div>
</div>
<script>
const snow = document.getElementById("snow");
for (let i = 0; i < 120; i++) {
const span = document.createElement("span");
span.innerText = "❄";
span.style.left = Math.random() * 100 + "vw";
span.style.animationDuration = (Math.random() * 5 + 5) + "s";
span.style.fontSize = (Math.random() * 10 + 10) + "px";
snow.appendChild(span);
}
</script>
</body>
</html>
三、可升级方向(如果你要“更炸”🔥)
- 🎶 加入圣诞背景音乐(自动/点击播放)
- ✨ Three.js 做 3D 圣诞树
- 🎆 彩灯粒子沿树体螺旋旋转
- 🖱️ 鼠标互动 / 键盘触发彩蛋
- 🌐 适配 WordPress 首页自动全屏