[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025迎接2026 - 除夕倒计时</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
overflow: hidden;
background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #0a0a0a 100%);
color: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* 粒子背景 */
#particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.particle {
position: absolute;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
border-radius: 50%;
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
50% { opacity: 1; }
}
/* 主容器 */
.container {
position: relative;
z-index: 10;
text-align: center;
max-width: 1200px;
padding: 20px;
}
/* 标题 */
.title {
font-size: 70px;
font-weight: bold;
background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s ease infinite;
text-shadow: 0 0 30px rgba(255,255,255,0.5);
margin-bottom: 30px;
letter-spacing: 3px;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 除夕倒计时标题 */
.countdown-title {
font-size: 45px;
margin-bottom: 25px;
text-shadow: 0 0 15px rgba(255,255,255,0.7);
background: linear-gradient(90deg, #ff8a00, #e52e71, #6b52ae);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: titlePulse 2s infinite;
}
@keyframes titlePulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 1; }
}
/* 倒计时容器 */
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
margin: 40px 0;
flex-wrap: wrap;
}
.countdown-item {
background: rgba(255,255,255,0.08);
border-radius: 20px;
padding: 25px 20px;
min-width: 120px;
border: 2px solid rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3),
inset 0 0 20px rgba(255,255,255,0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.countdown-item:hover {
transform: translateY(-10px);
border-color: rgba(255,255,255,0.4);
}
.countdown-item::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
animation: shine 4s infinite;
}
@keyframes shine {
0% { transform: rotate(45deg) translateX(-100%); }
100% { transform: rotate(45deg) translateX(100%); }
}
.countdown-value {
font-size: 60px;
font-weight: bold;
text-shadow: 0 0 15px rgba(255,255,255,0.7);
position: relative;
z-index: 2;
}
.countdown-label {
font-size: 18px;
opacity: 0.8;
margin-top: 10px;
position: relative;
z-index: 2;
}
/* 年份展示 */
.year-container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin: 50px 0;
flex-wrap: wrap;
}
.year-box {
perspective: 1000px;
}
.year {
font-size: 120px;
font-weight: bold;
padding: 30px 50px;
background: rgba(255,255,255,0.05);
border: 3px solid rgba(255,255,255,0.2);
border-radius: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 0 50px rgba(255,255,255,0.2),
inset 0 0 50px rgba(255,255,255,0.1);
animation: glow 2.5s ease-in-out infinite;
position: relative;
overflow: hidden;
transition: transform 0.5s ease;
}
.year:hover {
transform: scale(1.05);
}
.year::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
animation: shine 3s infinite;
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 50px rgba(255,255,255,0.2),
inset 0 0 50px rgba(255,255,255,0.1);
}
50% {
box-shadow: 0 0 80px rgba(255,255,255,0.4),
inset 0 0 80px rgba(255,255,255,0.2);
}
}
.arrow {
font-size: 80px;
animation: pulse 1.5s ease-in-out infinite;
color: #ffcc00;
text-shadow: 0 0 15px #ffcc00;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.2); opacity: 1; }
}
/* 祝福语 */
.blessing {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 22px;
opacity: 0;
animation: fadeInUp 2s ease-out 1s forwards;
text-align: center;
max-width: 80%;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
background: linear-gradient(90deg, #ff8a00, #e52e71, #6b52ae);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* 烟花效果 */
.firework {
position: fixed;
width: 4px;
height: 4px;
border-radius: 50%;
pointer-events: none;
}
/* 星星闪烁效果 */
.star {
position: fixed;
background: white;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: twinkle 2s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* 响应式设计 */
[url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
.title { font-size: 40px; }
.countdown-title { font-size: 30px; }
.year { font-size: 70px; padding: 20px 30px; }
.arrow { font-size: 50px; }
.countdown-value { font-size: 40px; }
.countdown-item { min-width: 90px; padding: 15px 10px; }
.year-container { gap: 20px; }
.countdown-container { gap: 15px; }
}
@media (max-width: 480px) {
.title { font-size: 30px; }
.countdown-title { font-size: 24px; }
.year { font-size: 50px; padding: 15px 20px; }
.arrow { font-size: 35px; }
.countdown-value { font-size: 30px; }
.countdown-item { min-width: 70px; padding: 10px 5px; }
}
/* 特殊效果 - 除夕倒计时高亮 */
.highlight {
animation: highlight 1.5s infinite;
}
@keyframes highlight {
0%, 100% {
box-shadow: 0 0 30px rgba(255, 140, 0, 0.5),
inset 0 0 20px rgba(255, 140, 0, 0.3);
}
50% {
box-shadow: 0 0 50px rgba(255, 140, 0, 0.8),
inset 0 0 30px rgba(255, 140, 0, 0.5);
}
}
/* 3D翻转效果 */
.flip-container {
perspective: 1000px;
display: inline-block;
}
.flip-card {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-container:hover .flip-card {
transform: rotateY(180deg);
}
.flip-front, .flip-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
}
.flip-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #ff8a00, #e52e71);
}
</style>
</head>
<body>
<!-- 粒子背景 -->
<div id="particles"></div>
<!-- 主内容 -->
<div class="container">
<h1 class="title">✨ 2025迎接2026 ✨</h1>
<div class="countdown-title">
🎊 2026年除夕倒计时 🎊
</div>
<div class="countdown-container">
<div class="countdown-item highlight">
<div class="countdown-value" id="days">00</div>
<div class="countdown-label">天</div>
</div>
<div class="countdown-item highlight">
<div class="countdown-value" id="hours">00</div>
<div class="countdown-label">时</div>
</div>
<div class="countdown-item highlight">
<div class="countdown-value" id="minutes">00</div>
<div class="countdown-label">分</div>
</div>
<div class="countdown-item highlight">
<div class="countdown-value" id="seconds">00</div>
<div class="countdown-label">秒</div>
</div>
</div>
<div class="year-container">
<div class="year-box">
<div class="year" id="currentYear">2025</div>
</div>
<div class="arrow">→</div>
<div class="year-box">
<div class="year" id="nextYear">2026</div>
</div>
</div>
</div>
<div class="blessing">
🧧 辞旧迎新，共创未来！愿2026除夕带给你无限幸福与团圆！🧧
</div>
<script>
// 创建粒子背景
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 150;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 5 + 2;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 3 + 's';
particle.style.animationDuration = (Math.random() * 3 + 2) + 's';
// 随机颜色
const colors = ['rgba(255,255,255,0.8)', 'rgba(255,215,0,0.8)', 'rgba(255,105,180,0.8)'];
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
particlesContainer.appendChild(particle);
}
}
// 创建星星
function createStars() {
for (let i = 0; i < 60; i++) {
const star = document.createElement('div');
star.className = 'star';
const size = Math.random() * 12 + 5;
star.style.width = size + 'px';
star.style.height = size + 'px';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 2 + 's';
star.style.animationDuration = (Math.random() * 2 + 1) + 's';
document.body.appendChild(star);
}
}
// 除夕倒计时功能
function updateCountdown() {
const now = new Date();
// 2026年2月16日 00:00:00
const chineseNewYear = new Date('2026-02-16T00:00:00');
const diff = chineseNewYear - now;
if (diff > 0) {
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = String(days).padStart(2, '0');
document.getElementById('hours').textContent = String(hours).padStart(2, '0');
document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
// 添加特殊效果当剩余时间少于10天
if (days < 10) {
document.querySelectorAll('.countdown-item').forEach(item => {
item.classList.add('highlight');
});
}
} else {
// 除夕到了！
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
celebrateNewYear();
document.querySelector('.countdown-title').textContent = '🎊 除夕快乐！新年快乐！🎊';
}
}
// 烟花效果
function createFirework(x, y) {
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ff8a00', '#e52e71'];
const particleCount = 40;
for (let i = 0; i < particleCount; i++) {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = x + 'px';
firework.style.top = y + 'px';
firework.style.background = colors[Math.floor(Math.random() * colors.length)];
const angle = (Math.PI * 2 * i) / particleCount;
const velocity = Math.random() * 6 + 3;
const vx = Math.cos(angle) * velocity;
const vy = Math.sin(angle) * velocity;
document.body.appendChild(firework);
animateFirework(firework, vx, vy);
}
}
function animateFirework(element, vx, vy) {
let x = parseFloat(element.style.left);
let y = parseFloat(element.style.top);
let opacity = 1;
let gravity = 0.2;
const animate = () => {
x += vx;
y += vy;
vy += gravity;
opacity -= 0.015;
element.style.left = x + 'px';
element.style.top = y + 'px';
element.style.opacity = opacity;
if (opacity > 0) {
requestAnimationFrame(animate);
} else {
element.remove();
}
};
animate();
}
// 庆祝除夕
function celebrateNewYear() {
for (let i = 0; i < 100; i++) {
setTimeout(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.6;
createFirework(x, y);
}, i * 80);
}
}
// 点击创建烟花
document.addEventListener('click', (e) => {
createFirework(e.clientX, e.clientY);
});
// 自动创建烟花
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.5;
createFirework(x, y);
}, 3000);
// 数字翻转动画
function animateYear(element, targetYear) {
let current = parseInt(element.textContent);
const increment = targetYear > current ? 1 : -1;
const interval = setInterval(() => {
current += increment;
element.textContent = current;
if (current === targetYear) {
clearInterval(interval);
}
}, 100);
}
// 初始化
createParticles();
createStars();
updateCountdown();
setInterval(updateCountdown, 1000);
// 页面加载动画
window.addEventListener('load', () => {
document.querySelector('.title').style.animation = 'gradient 3s ease infinite, fadeInUp 1s ease-out';
document.querySelectorAll('.year').forEach((year, index) => {
setTimeout(() => {
year.style.animation = 'glow 2.5s ease-in-out infinite, fadeInUp 0.8s ease-out';
}, index * 200);
});
});
// 鼠标移动效果
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
document.querySelectorAll('.year').forEach(year => {
const moveX = (x - 0.5) * 20;
const moveY = (y - 0.5) * 20;
year.style.transform = `translateX(${moveX}px) translateY(${moveY}px)`;
});
});
// 添加音效提示（可选）
function playBeep() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 800;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.5);
} catch (e) {
// 忽略音频错误
}
}
// 每小时播放一次提示音
setInterval(playBeep, 3600000);
// 除夕特殊效果
function checkNewYear() {
const now = new Date();
const chineseNewYear = new Date('2026-02-16T00:00:00');
const diff = chineseNewYear - now;
// 如果距离除夕不到1天，触发特殊效果
if (diff > 0 && diff < 24 * 60 * 60 * 1000) {
document.body.style.background = 'linear-gradient(135deg, #1a0a2e 0%, #4a0a2e 50%, #1a0a2e 100%)';
// 增加烟花频率
clearInterval(window.fireworkInterval);
window.fireworkInterval = setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.5;
createFirework(x, y);
}, 1000);
}
}
// 每分钟检查一次
setInterval(checkNewYear, 60000);
checkNewYear();
</script>
</body>
</html>
[复制链接]
发表于 2026-1-30 22:11
分享到朋友圈
