LINUXDO恭贺新春抛砖引玉版：https://linuxdo.haiquan123.workers.dev/
由C3.5+o1-mini制作，未做移动端适配（基础太差不知道咋搞）
代码开源，大家感兴趣可以修改一下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LINUX DO 恭贺新春</title>
<!-- 引入 Google 字体 ZCOOL KuaiLe -->
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
/* 全局样式 */
body {
background-color: #1a1a1a;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
font-family: 'SimSun', '宋体', serif; /* 保持现有字体 */
}
/* 标题样式 */
.header {
color: #FFD700;
font-size: 48px;
font-weight: bold;
text-align: center;
margin-bottom: 150px; /* 增加底部间距 */
position: absolute;
top: 20px; /* 向上移动标题 */
text-shadow: 0 0 10px #FF4500,
0 0 20px #FF4500,
0 0 30px #FF4500;
animation: glow 2s ease-in-out infinite alternate;
z-index: 3;
}
/* 烟花Canvas样式 */
#fireworks-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 让Canvas不阻挡鼠标事件 */
z-index: 1;
}
/* 灯笼容器样式 */
.lantern-container {
display: flex;
justify-content: center;
gap: 1000px; /* 增加左右灯笼组之间的间距 */
z-index: 2;
}
/* 灯笼组样式 */
.lantern-group {
position: relative;
}
/* 锚点样式 */
.anchor-point {
position: relative;
width: 1px;
height: 1px;
top: -150px;
}
/* 第二个灯笼的锚点 */
.anchor-point.second {
left: -120px; /* 增加左边灯笼之间的间距 */
top: -180px;
}
/* 右侧灯笼组的锚点 */
.anchor-point.right {
left: 120px; /* 增加右边灯笼之间的间距 */
}
.anchor-point.right.second {
left: 240px; /* 增加右边灯笼之间的间距 */
top: -180px;
}
/* 绳子和灯笼的容器样式 */
.string-and-lantern {
position: absolute;
transform-origin: top left;
animation: swingInWindLeft 4s ease-in-out infinite;
}
/* 第二个灯笼的动画延迟 */
.string-and-lantern.second {
animation: swingInWindLeft 4s ease-in-out infinite 0.5s;
}
/* 右侧灯笼组的样式 */
.string-and-lantern.right {
animation: swingInWindRight 4s ease-in-out infinite;
}
.string-and-lantern.right.second {
animation: swingInWindRight 4s ease-in-out infinite 0.5s;
}
/* 绳子样式 */
.curved-string {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 120px;
background-color: #8B4513;
transform-origin: top;
}
/* 灯笼样式 */
.lantern {
position: absolute;
top: 115px;
left: -75px;
width: 150px;
height: 150px;
background: radial-gradient(circle at center, #ff3333 0%, #ff0000 50%, #cc0000 100%);
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 灯笼顶部和底部的装饰 */
.lantern::before, .lantern::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 30px;
background-color: #8B4513;
border-radius: 10px;
}
.lantern::before {
top: -20px;
border-radius: 10px 10px 0 0;
}
.lantern::after {
bottom: -20px;
border-radius: 0 0 10px 10px;
}
/* 灯笼文字样式 */
.lantern-text {
position: relative;
z-index: 2;
color: #FFD700;
font-family: 'ZCOOL KuaiLe', cursive; /* 使用 ZCOOL KuaiLe 字体 */
font-size: 24px;
font-weight: bold;
text-align: center;
line-height: 1.2;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.chinese-text {
font-family: 'SimSun', '宋体', serif;
font-size: 32px;
}
/* 灯光效果 */
.light {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255,255,0,0.7) 0%, rgba(255,165,0,0.3) 100%);
border-radius: 50%;
animation: flicker 1s infinite alternate;
}
.light.second {
animation: flicker 1s infinite alternate 0.5s;
}
/* 流苏容器样式 */
.tassels {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 50px;
display: flex;
justify-content: space-around;
}
/* 流苏样式 */
.tassel {
width: 2px;
height: 100%;
background-color: #FFD700;
position: relative;
transform-origin: top;
animation: tasselWave 2s ease-in-out infinite;
}
.second .tassel {
animation-delay: 0.5s;
}
.tassel:nth-child(2) { animation-delay: 0.2s; }
.tassel:nth-child(3) { animation-delay: 0.4s; }
.tassel:nth-child(4) { animation-delay: 0.6s; }
.tassel:nth-child(5) { animation-delay: 0.8s; }
/* 摆动动画 */
@keyframes swingInWindLeft {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
@keyframes swingInWindRight {
0% { transform: rotate(0deg); }
50% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
/* 灯光闪烁动画 */
@keyframes flicker {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
/* 流苏摆动动画 */
@keyframes tasselWave {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(8deg) translateX(2px); }
}
/* 标题发光动画 */
@keyframes glow {
from {
text-shadow: 0 0 10px #FF4500,
0 0 20px #FF4500,
0 0 30px #FF4500;
}
to {
text-shadow: 0 0 20px #FF4500,
0 0 30px #FF4500,
0 0 40px #FF4500;
}
}
/* 倒计时容器样式 */
.countdown-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 30px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.7); /* 半透明的背景 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影效果 */
z-index: 4; /* 在所有元素之上 */
}
/* 倒计时主标题样式 */
.countdown-container h1 {
font-size: 2.5em;
margin-bottom: 15px;
color: #FFD700;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* 给标题增加阴影 */
font-family: 'ZCOOL KuaiLe', cursive; /* 使用计时组件的字体 */
}
/* 倒计时内容样式 */
.countdown-container .time,
.countdown-container .cny-date,
.countdown-container .countdown {
font-size: 1.5em;
margin: 10px 0;
color: #FFD700; /* 保持字体颜色一致 */
font-family: 'ZCOOL KuaiLe', cursive; /* 保持字体一致 */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<!-- 烟花Canvas背景 -->
<canvas id="fireworks-canvas"></canvas>
<!-- 标题 -->
<div class="header">LINUX DO 恭贺新春</div>
<!-- 倒计时容器 -->
<div class="countdown-container">
<h1>蛇年倒计时</h1>
<!-- 当前时间 -->
<div class="time">当前时间：<span id="currentTime">--:--:--</span></div>
<!-- 蛇年的日期 -->
<div class="cny-date">蛇年：<span id="cnyDate">--</span></div>
<!-- 蛇年倒计时 -->
<div class="countdown">倒计时：<span id="countdown">--天 --小时 --分钟 --秒</span></div>
</div>
<!-- 灯笼容器 -->
<div class="lantern-container">
<!-- 左边灯笼组 -->
<div class="lantern-group">
<div class="anchor-point">
<div class="string-and-lantern">
<div class="curved-string"></div>
<div class="lantern">
<div class="light"></div>
<div class="lantern-text chinese-text">巳巳<br>如意</div>
<div class="tassels">
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
</div>
</div>
</div>
</div>
<div class="anchor-point second">
<div class="string-and-lantern second">
<div class="curved-string"></div>
<div class="lantern">
<div class="light second"></div>
<div class="lantern-text">LINUX<br>DO</div>
<div class="tassels">
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 右边灯笼组 -->
<div class="lantern-group right">
<div class="anchor-point right">
<div class="string-and-lantern right">
<div class="curved-string"></div>
<div class="lantern">
<div class="light"></div>
<div class="lantern-text chinese-text">恭贺<br>新春</div>
<div class="tassels">
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
</div>
</div>
</div>
</div>
<div class="anchor-point right second">
<div class="string-and-lantern right second">
<div class="curved-string"></div>
<div class="lantern">
<div class="light second"></div>
<div class="lantern-text">2025</div>
<div class="tassels">
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
<div class="tassel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 烟花特效脚本 -->
<script>
// 获取Canvas
const canvas = document.getElementById('fireworks-canvas');
const ctx = canvas.getContext('2d');
// 设置Canvas大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花数组
let fireworks = [];
let particles = [];
// 烟花类
class Firework {
constructor(x, y, targetY) {
this.x = x;
this.y = y;
this.targetY = targetY;
this.speed = 5; // 增加速度
// 设置角度为主要向上，±10度的随机偏移
const angleRange = Math.PI / 18; // 10度
this.angle = (Math.PI * 3 / 2) + (Math.random() * angleRange * 2 - angleRange);
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
this.alive = true;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
if (this.y <= this.targetY) {
this.explode();
this.alive = false;
}
}
explode() {
const particleCount = 40; // 增加粒子数量
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(this.x, this.y, this.color));
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, 4, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.speed = Math.random() * 4 + 2; // 增加粒子速度
this.angle = Math.random() * Math.PI * 2;
this.gravity = 0.05;
this.alpha = 1;
this.fade = Math.random() * 0.02 + 0.01;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + this.gravity;
this.alpha -= this.fade;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
// 创建烟花
function createFirework() {
const x = Math.random() * canvas.width;
const y = canvas.height;
const targetY = Math.random() * canvas.height / 2;
fireworks.push(new Firework(x, y, targetY));
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = 'rgba(26, 26, 26, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制烟花
fireworks.forEach((firework, index) => {
if (firework.alive) {
firework.update();
firework.draw();
} else {
fireworks.splice(index, 1);
}
});
// 更新和绘制粒子
particles.forEach((particle, index) => {
if (particle.alpha <= 0) {
particles.splice(index, 1);
} else {
particle.update();
particle.draw();
}
});
// 随机生成烟花
if (Math.random() < 0.03) { // 增加烟花出现的频率
createFirework();
}
}
// 监听窗口大小变化
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 启动动画
animate();
// 倒计时相关脚本
const currentTimeEl = document.getElementById('currentTime');
const cnyDateEl = document.getElementById('cnyDate');
const countdownEl = document.getElementById('countdown');
const cnyDates = {
2020: '2020-01-25',
2021: '2021-02-12',
2022: '2022-02-01',
2023: '2023-01-22',
2024: '2024-02-10',
2025: '2025-01-29',
2026: '2026-02-17',
2027: '2027-02-06',
2028: '2028-01-26',
2029: '2029-02-13',
2030: '2030-02-03'
};
function updateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const date = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
currentTimeEl.textContent = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
let cnyYear = year;
let cnyDateStr = cnyDates[cnyYear];
let cnyDate = cnyDateStr ? new Date(cnyDateStr + 'T00:00:00') : null;
if (cnyDate && now > cnyDate) {
cnyYear += 1;
cnyDateStr = cnyDates[cnyYear];
cnyDate = cnyDateStr ? new Date(cnyDateStr + 'T00:00:00') : null;
}
if (cnyDate) {
cnyDateEl.textContent = `${cnyYear}-${String(cnyDate.getMonth() + 1).padStart(2, '0')}-${String(cnyDate.getDate()).padStart(2, '0')}`;
const diff = cnyDate - now;
if (diff <= 0) {
countdownEl.textContent = '今天是蛇年！';
} else {
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hoursLeft = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutesLeft = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const secondsLeft = Math.floor((diff % (1000 * 60)) / 1000);
countdownEl.textContent = `${days}天 ${hoursLeft}小时 ${minutesLeft}分钟 ${secondsLeft}秒`;
}
} else {
cnyDateEl.textContent = '无法计算';
countdownEl.textContent = '--';
}
}
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
