<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新年倒计时</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.container {
position: relative;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.countdown-title {
font-size: 3em;
margin-bottom: 30px;
color: #ff0;
text-shadow: 0 0 10px #f00;
animation: glow 1s ease-in-out infinite alternate;
}
.countdown-container {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
}
.countdown-box {
background: rgba(255, 0, 0, 0.3);
border: 2px solid #ff0;
border-radius: 10px;
padding: 20px;
min-width: 120px;
box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
}
.countdown-value {
font-size: 4em;
font-weight: bold;
color: #ff0;
text-shadow: 0 0 10px #f00;
}
.countdown-label {
font-size: 1.5em;
color: #fff;
margin-top: 10px;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
animation: explode 1s ease-out forwards;
opacity: 0;
}
.message {
font-size: 2em;
margin-top: 30px;
color: #ff0;
text-shadow: 0 0 10px #f00;
opacity: 0;
transition: opacity 1s;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #f00, 0 0 20px #f00;
}
to {
text-shadow: 0 0 20px #f00, 0 0 30px #ff0, 0 0 40px #ff0;
}
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
.hidden-link {
position: absolute;
bottom: 10px;
right: 10px;
color: #333;
font-size: 12px;
text-decoration: none;
}
.lantern {
position: absolute;
width: 40px;
height: 60px;
background: #f00;
border-radius: 50% 50% 10px 10px;
box-shadow: 0 0 20px #f00;
animation: swing 3s infinite ease-in-out;
}
.lantern:before {
content: "";
position: absolute;
width: 8px;
height: 12px;
background: #ff0;
top: -12px;
left: 16px;
border-radius: 5px 5px 0 0;
}
.lantern:after {
content: "福";
position: absolute;
color: #ff0;
font-size: 20px;
font-weight: bold;
top: 20px;
left: 10px;
}
@keyframes swing {
0%, 100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="countdown-title">新年倒计时</h1>
<div class="countdown-container">
<div class="countdown-box">
<div class="countdown-value" id="days">00</div>
<div class="countdown-label">天</div>
</div>
<div class="countdown-box">
<div class="countdown-value" id="hours">00</div>
<div class="countdown-label">时</div>
</div>
<div class="countdown-box">
<div class="countdown-value" id="minutes">00</div>
<div class="countdown-label">分</div>
</div>
<div class="countdown-box">
<div class="countdown-value" id="seconds">00</div>
<div class="countdown-label">秒</div>
</div>
</div>
<div class="message" id="message"></div>
</div>
<script>
// 设置新年日期（可以根据需要修改）
const newYearDate = new Date();
newYearDate.setFullYear(newYearDate.getFullYear() + 1, 0, 1);
newYearDate.setHours(0, 0, 0, 0);
// 更新倒计时
function updateCountdown() {
const now = new Date();
const diff = newYearDate - now;
if (diff <= 0) {
// 新年到了！
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
const message = document.getElementById('message');
message.textContent = '新年快乐！';
message.style.opacity = '1';
// 增加烟花频率
clearInterval(countdownInterval);
setInterval(createFirework, 200);
return;
}
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 = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
// 当时间接近时增加烟花频率
if (days === 0 && hours < 12) {
createFirework();
}
}
// 创建烟花效果
function createFirework() {
const colors = ['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f'];
const container = document.querySelector('.container');
for (let i = 0; i < 20; i++) {
const firework = document.createElement('div');
firework.className = 'firework';
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.7;
const color = colors[Math.floor(Math.random() * colors.length)];
const size = Math.random() * 8 + 3;
const delay = Math.random();
firework.style.left = `${x}px`;
firework.style.top = `${y}px`;
firework.style.backgroundColor = color;
firework.style.width = `${size}px`;
firework.style.height = `${size}px`;
firework.style.animationDelay = `${delay}s`;
container.appendChild(firework);
// 移除烟花元素以节省内存
setTimeout(() => {
firework.remove();
}, 1000);
}
}
// 创建灯笼
function createLanterns() {
const container = document.querySelector('.container');
for (let i = 0; i < 8; i++) {
const lantern = document.createElement('div');
lantern.className = 'lantern';
const x = i % 2 === 0 ? 30 : window.innerWidth - 70;
const y = 30 + (Math.floor(i / 2) * 100);
const delay = Math.random() * 2;
lantern.style.left = `${x}px`;
lantern.style.top = `${y}px`;
lantern.style.animationDelay = `${delay}s`;
container.appendChild(lantern);
}
}
// 初始化
function init() {
createLanterns();
updateCountdown();
// 每隔一段时间创建烟花
setInterval(createFirework, 3000);
}
// 每秒更新倒计时
const countdownInterval = setInterval(updateCountdown, 1000);
// 页面加载完成后初始化
window.addEventListener('load', init);
</script>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
