<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2026跨年倒计时 | 新年新计划</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.cn/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC', sans-serif;
}
:root {
--primary-color: #ff3366;
--secondary-color: #ffcc00;
--accent-color: #33ccff;
--dark-bg: #0a0e17;
--card-bg: rgba(20, 25, 40, 0.9);
--text-light: #ffffff;
--text-gold: #ffd700;
--shadow-glow: 0 0 20px rgba(255, 51, 102, 0.5);
}
body {
background-color: var(--dark-bg);
background-image:
radial-gradient(circle at 10% 20%, rgba(255, 51, 102, 0.1) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(51, 204, 255, 0.1) 0%, transparent 20%);
color: var(--text-light);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 10;
}
/* 灯笼样式 */
.lanterns {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.lantern {
position: absolute;
width: 60px;
height: 80px;
background: linear-gradient(145deg, #ff0000, #cc0000);
border-radius: 50% 50% 40% 40%;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
animation: swing 4s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.5s);
}
.lantern::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 15px;
background: #ffcc00;
border-radius: 5px 5px 0 0;
}
.lantern::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 15px;
background: #ffcc00;
border-radius: 0 0 10px 10px;
}
.lantern .tassel {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 30px;
background: linear-gradient(to bottom, #ffcc00, #ff9900);
}
@keyframes swing {
0%, 100% { transform: translateY(0) rotate(-5deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
/* 烟花效果 */
.fireworks {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
animation: explode 2s ease-out forwards;
}
@keyframes explode {
0% {
transform: translateY(100vh);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: translateY(var(--y)) translateX(var(--x));
opacity: 0;
width: 0;
height: 0;
box-shadow:
0 0 20px 5px var(--c),
0 0 40px 10px var(--c),
0 0 60px 15px var(--c);
}
}
/* 头部样式 */
header {
text-align: center;
padding: 40px 0 20px;
position: relative;
z-index: 10;
}
.logo {
font-size: 2.8rem;
font-weight: 700;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 10px;
text-shadow: 0 0 15px rgba(255, 51, 102, 0.3);
}
.subtitle {
font-size: 1.2rem;
color: #aaa;
margin-bottom: 30px;
font-weight: 300;
}
/* 倒计时区域 */
.countdown-section {
text-align: center;
margin: 40px 0 60px;
padding: 40px 20px;
background: rgba(10, 14, 23, 0.7);
border-radius: 25px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 204, 0, 0.2);
box-shadow: var(--shadow-glow);
position: relative;
overflow: hidden;
}
.countdown-title {
font-size: 2.2rem;
margin-bottom: 30px;
background: linear-gradient(90deg, #ffcc00, #ff9966);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.countdown-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.countdown-item {
background: var(--card-bg);
border-radius: 20px;
padding: 25px 15px;
min-width: 150px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 204, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.countdown-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(255, 204, 0, 0.2);
}
.countdown-value {
font-size: 3.5rem;
font-weight: 700;
color: var(--text-gold);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
line-height: 1;
margin-bottom: 10px;
}
.countdown-label {
font-size: 1.1rem;
color: #aaa;
text-transform: uppercase;
letter-spacing: 2px;
}
.new-year-date {
margin-top: 30px;
font-size: 1.3rem;
color: var(--accent-color);
}
/* 计划区域 */
.plans-section {
margin-bottom: 60px;
}
.section-title {
font-size: 2.2rem;
text-align: center;
margin-bottom: 40px;
background: linear-gradient(90deg, #33ccff, #9966ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, #33ccff, #9966ff);
border-radius: 3px;
}
.plans-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}
.plan-card {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(51, 204, 255, 0.1);
transition: transform 0.4s, box-shadow 0.4s;
display: flex;
flex-direction: column;
height: 100%;
}
.plan-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(51, 204, 255, 0.2);
}
.plan-icon {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 20px;
text-align: center;
}
.plan-title {
font-size: 1.5rem;
color: var(--text-light);
margin-bottom: 15px;
text-align: center;
}
.plan-description {
color: #bbb;
line-height: 1.6;
flex-grow: 1;
margin-bottom: 20px;
}
.plan-time {
display: flex;
align-items: center;
justify-content: center;
background: rgba(51, 204, 255, 0.1);
padding: 10px 20px;
border-radius: 50px;
color: var(--accent-color);
font-weight: 500;
}
.plan-time i {
margin-right: 8px;
}
/* 页脚 */
footer {
text-align: center;
padding: 30px 0;
color: #777;
font-size: 0.9rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.heart {
color: var(--primary-color);
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 15px;
}
.logo {
font-size: 2.2rem;
}
.countdown-item {
min-width: 120px;
padding: 20px 10px;
}
.countdown-value {
font-size: 2.8rem;
}
.plans-container {
grid-template-columns: 1fr;
}
.lantern {
width: 40px;
height: 60px;
}
}
/* 雪花效果 */
.snowflakes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.snowflake {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 灯笼 -->
<div id="lanterns"></div>
<!-- 烟花 -->
<div id="fireworks"></div>
<!-- 雪花 -->
<div id="snowflakes"></div>
<div>
<header>
<h1>2026跨年倒计时</h1>
<p>迎接新的一年，规划更好的自己</p>
</header>
<main>
<section>
<h2>距离2026年还有</h2>
<div>
<div>
<div id="days">00</div>
<div>天</div>
</div>
<div>
<div id="hours">00</div>
<div>小时</div>
</div>
<div>
<div id="minutes">00</div>
<div>分钟</div>
</div>
<div>
<div id="seconds">00</div>
<div>秒</div>
</div>
</div>
<p id="newYearDate">2026年1月1日 00:00:00</p>
</section>
<section>
<h2>跨年计划建议</h2>
<div>
<div>
<div>
<i class="fas fa-book"></i>
</div>
<h3>年度总结日记</h3>
<p>回顾过去一年的成长与收获，记录重要时刻和感悟。写一篇真诚的年度总结，反思自己的进步与不足，为新的一年制定方向。</p>
<div>
<i class="far fa-clock"></i> 预计花费：60-90分钟
</div>
</div>
<div>
<div>
<i class="fas fa-bullseye"></i>
</div>
<h3>新年目标设定</h3>
<p>制定明确、可衡量的新年目标。将大目标分解为季度、月度计划，确保每一步都清晰可行，让梦想照进现实。</p>
<div>
<i class="far fa-clock"></i> 预计花费：45-60分钟
</div>
</div>
<div>
<div>
<i class="fas fa-heart"></i>
</div>
<h3>感恩与致谢清单</h3>
<p>列出过去一年中帮助过你的人、值得感恩的事。可以写一封感谢信或制作一份致谢清单，表达你的感激之情。</p>
<div>
<i class="far fa-clock"></i> 预计花费：30-45分钟
</div>
</div>
<div>
<div>
<i class="fas fa-share-alt"></i>
</div>
<h3>经验分享整理</h3>
<p>整理过去一年学到的重要经验或技能，写成短文或制作成简单的教程。分享知识不仅能帮助他人，也能加深自己的理解。</p>
<div>
<i class="far fa-clock"></i> 预计花费：60-75分钟
</div>
</div>
<div>
<div>
<i class="fas fa-images"></i>
</div>
<h3>年度照片回顾</h3>
<p>整理一年中最有意义的照片，制作电子相册或拼贴画。每张照片背后都有故事，重温这些美好时刻，为新的一年注入正能量。</p>
<div>
<i class="far fa-clock"></i> 预计花费：45-60分钟
</div>
</div>
</div>
</section>
</main>
<footer>
<p>© 2025 跨年倒计时 | 用心迎接每一个新年 <span>❤</span></p>
<p>本页面的CSS和JS资源均使用国内镜像源加载</p>
</footer>
</div>
<script>
// 创建灯笼
function createLanterns() {
const lanternsContainer = document.getElementById('lanterns');
const lanternCount = 15;
for (let i = 0; i < lanternCount; i++) {
const lantern = document.createElement('div');
lantern.className = 'lantern';
lantern.style.setProperty('--i', i);
lantern.style.left = `${Math.random() * 100}%`;
lantern.style.top = `${Math.random() * 30}%`;
const tassel = document.createElement('div');
tassel.className = 'tassel';
lantern.appendChild(tassel);
lanternsContainer.appendChild(lantern);
}
}
// 创建雪花
function createSnowflakes() {
const snowflakesContainer = document.getElementById('snowflakes');
const snowflakeCount = 50;
for (let i = 0; i < snowflakeCount; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.style.left = `${Math.random() * 100}%`;
snowflake.style.width = `${Math.random() * 5 + 2}px`;
snowflake.style.height = snowflake.style.width;
snowflake.style.opacity = Math.random() * 0.7 + 0.3;
snowflake.style.animationDuration = `${Math.random() * 10 + 10}s`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
snowflakesContainer.appendChild(snowflake);
}
}
// 创建烟花
function createFirework() {
const fireworksContainer = document.getElementById('fireworks');
const firework = document.createElement('div');
firework.className = 'firework';
// 随机颜色
const colors = ['#ff3366', '#ffcc00', '#33ccff', '#9966ff', '#00ff99'];
const color = colors[Math.floor(Math.random() * colors.length)];
// 随机位置
const x = (Math.random() - 0.5) * 100;
const y = Math.random() * 50;
firework.style.setProperty('--x', `${x}px`);
firework.style.setProperty('--y', `${y}vh`);
firework.style.setProperty('--c', color);
这条帮助是否解决了您的问题？ 已解决 未解决