2026新年快乐代码

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

CC 4.0 BY-SA版权

文章标签：

于 2025-06-04 14:59:55 首次发布

<!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>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}

/* 新年祝福容器 */
.new-year-container {
position: relative;
width: 100%;
max-width: 800px;
text-align: center;
z-index: 10;
}

/* 2026文字动画 */
.year-2026 {
font-size: 8rem;
font-weight: bold;
background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
margin-bottom: 20px;
animation: glow 2s infinite alternate, float 3s ease-in-out infinite;
}

/* 新年快乐文字 */
.greeting {
font-size: 3rem;
margin-bottom: 30px;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
animation: slideIn 1.5s ease-out;
}

/* 祝福语 */
.wishes {
font-size: 1.5rem;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;
animation: fadeIn 2s ease-in 1s forwards;
}

/* 烟花效果 */
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 5px;
animation: firework 2s ease-out infinite;
}

/* 灯笼装饰 */
.lantern {
position: absolute;
width: 60px;
height: 80px;
background: #ff4d4d;
border-radius: 50% 50% 10% 10%;
box-shadow: 0 0 20px #ff4d4d;
animation: swing 3s ease-in-out infinite;
}

.lantern:before {
content: '';
position: absolute;
top: -10px;
left: 25px;
width: 10px;
height: 15px;
background: #ffcc00;
border-radius: 5px;
}

.lantern:after {
content: '福';
position: absolute;
top: 30px;
left: 20px;
color: #ffcc00;
font-size: 20px;
font-weight: bold;
}

/* 灯笼位置 */
.lantern-1 {
top: 10%;
left: 10%;
}

.lantern-2 {
top: 10%;
right: 10%;
animation-delay: 0.5s;
}

.lantern-3 {
bottom: 10%;
left: 15%;
animation-delay: 1s;
}

.lantern-4 {
bottom: 10%;
right: 15%;
animation-delay: 1.5s;
}

/* 雪花效果 */
.snowflake {
position: absolute;
color: #fff;
font-size: 1em;
animation: fall linear infinite;
pointer-events: none;
}

/* 动画定义 */
@keyframes glow {
from {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
to {
text-shadow: 0 0 20px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 215, 0, 0.5);
}
}

@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

@keyframes slideIn {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes firework {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty));
opacity: 0;
}
}

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

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

/* 响应式调整 */
@media (max-width: 768px) {
.year-2026 {
font-size: 5rem;
}
.greeting {
font-size: 2rem;
}
.wishes {
font-size: 1.2rem;
}
}
</style>
</head>
<body>

<div class="lantern lantern-1"></div>
<div class="lantern lantern-2"></div>
<div class="lantern lantern-3"></div>
<div class="lantern lantern-4"></div>


<div class="new-year-container">
<div class="year-2026">2026</div>
<h1 class="greeting">新年快乐</h1>
<p class="wishes">
愿新的一年带给你健康、幸福和成功<br>
事业蒸蒸日上，家庭幸福美满<br>
心想事成，万事如意！
</p>

<p style="font-size: 12px; opacity: 0.5; margin-top: 50px;">

</p>
</div>


<script>
// 创建烟花效果
function createFireworks() {
const colors = ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#ff00ff'];

setInterval(() => {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * 100 + 'vw';
firework.style.top = Math.random() * 100 + 'vh';
firework.style.color = colors[Math.floor(Math.random() * colors.length)];

// 设置随机终点
const angle = Math.random() * Math.PI * 2;
const distance = 50 + Math.random() * 100;
const tx = Math.cos(angle) * distance;
const ty = Math.sin(angle) * distance;

firework.style.setProperty('--tx', tx + 'px');
firework.style.setProperty('--ty', ty + 'px');

document.body.appendChild(firework);

// 移除元素
setTimeout(() => {
firework.remove();
}, 2000);
}, 200);
}

// 创建雪花效果
function createSnowflakes() {
const snowflakes = ['❄', '❅', '❆', '✻', '✼'];

setInterval(() => {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = snowflakes[Math.floor(Math.random() * snowflakes.length)];
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.fontSize = (10 + Math.random() * 20) + 'px';
snowflake.style.opacity = Math.random();
snowflake.style.animationDuration = (5 + Math.random() * 10) + 's';

document.body.appendChild(snowflake);

// 移除元素
setTimeout(() => {
snowflake.remove();
}, 10000);
}, 100);
}

// 页面加载后启动动画
window.onload = function() {
createFireworks();
createSnowflakes();
};
</script>
</body>
</html>