2026新年快乐

2026新年页面的CSS与JS实现

原创已于 2025-06-27 13:34:15 修改 · 777 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2025-06-04 15:23:52 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2026新年快乐</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
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;
z-index: 10;
}

h1 {
font-size: 5em;
margin-bottom: 20px;
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
animation: glow 2s infinite alternate;
}

.subtitle {
font-size: 2em;
margin-bottom: 30px;
text-shadow: 0 0 5px #ffcc00;
}

.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
animation: explode 2s ease-out forwards;
opacity: 0;
}

.lantern {
position: absolute;
width: 60px;
height: 80px;
background-color: #ff0000;
border-radius: 50% 50% 10px 10px;
box-shadow: 0 0 20px #ff0000;
animation: swing 3s infinite alternate;
}

.lantern:before {
content: "福";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffcc00;
font-size: 24px;
font-weight: bold;
}

.lantern:after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background-color: #ffcc00;
border-radius: 50%;
}

.countdown {
font-size: 2em;
margin-top: 30px;
color: #ffcc00;
}

@keyframes glow {
from {
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
}
to {
text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000, 0 0 60px #ff0000;
}
}

@keyframes explode {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}

@keyframes swing {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}

.snowflake {
position: absolute;
color: #fff;
font-size: 1em;
animation: fall linear infinite;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.promo {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #aaa;
font-size: 0.8em;
}

.promo a {
color: #ffcc00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>2026 新年快乐</h1>
<div class="subtitle">恭贺新禧 · 万事如意</div>
<div class="countdown" id="countdown"></div>
</div>



<script>
// 创建灯笼
function createLanterns() {
const colors = ['#ff0000', '#ff6600', '#ffcc00', '#ff0066'];
for (let i = 0; i < 8; i++) {
const lantern = document.createElement('div');
lantern.className = 'lantern';
lantern.style.left = `${Math.random() * 100}%`;
lantern.style.top = `${Math.random() * 30}%`;
lantern.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
lantern.style.animationDuration = `${2 + Math.random() * 3}s`;
document.body.appendChild(lantern);
}
}

// 创建烟花
function createFirework() {
const colors = ['#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#0066ff', '#cc00ff'];
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.5;
const color = colors[Math.floor(Math.random() * colors.length)];

for (let i = 0; i < 30; i++) {
const particle = document.createElement('div');
particle.className = 'firework';
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
particle.style.backgroundColor = color;
particle.style.animationDuration = `${1 + Math.random()}s`;
particle.style.animationDelay = `${Math.random() * 0.5}s`;

// 设置粒子运动方向
const angle = Math.random() * Math.PI * 2;
const distance = 50 + Math.random() * 100;
const endX = x + Math.cos(angle) * distance;
const endY = y + Math.sin(angle) * distance;

particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;

document.body.appendChild(particle);

// 动画结束后移除粒子
setTimeout(() => {
particle.remove();
}, 2000);
}
}

// 创建雪花
function createSnowflakes() {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.innerHTML = '❄';
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.style.top = '-20px';
snowflake.style.animationDuration = `${5 + Math.random() * 10}s`;
document.body.appendChild(snowflake);

// 雪花落地后移除
setTimeout(() => {
snowflake.remove();
}, 15000);
}

// 倒计时
function updateCountdown() {
const now = new Date();
const newYear = new Date('January 1, 2026 00:00:00');
const diff = newYear - now;

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('countdown').innerHTML = `距离2026年还有: ${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
}

// 初始化
window.onload = function() {
createLanterns();

// 定期创建烟花
setInterval(createFirework, 800);

// 定期创建雪花
setInterval(createSnowflakes, 300);

// 更新倒计时
updateCountdown();
setInterval(updateCountdown, 1000);
};
</script>
</body>
</html>