设计思路
页面加载后会自动显示高考内容，点击顶部按钮可以切换到中考内容。倒计时会每秒更新，为考生提供实时的备考时间参考。
-
使用代表希望的蓝色和金色渐变作为主色调
-
顶部导航栏可切换高考/中考内容
-
添加动态倒计时功能
-
设计励志名言卡片和备考小贴士
-
添加动画效果增强视觉体验
-
确保移动端友好设计
-
下面是完整代码演示
-
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加油吧！学子们 - 高考中考加油</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2980, #26d0ce);
color: #fff;
min-height: 100vh;
padding-bottom: 40px;
background-attachment: fixed;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 30px 0;
position: relative;
}
h1 {
font-size: 3.5rem;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #ffd700, #ff8c00, #ff4500);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: titleGlow 2s infinite alternate;
}
@keyframes titleGlow {
0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
100% { text-shadow: 0 0 20px rgba(255, 140, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.6); }
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto 30px;
line-height: 1.6;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
}
.tab-btn {
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
padding: 15px 35px;
font-size: 1.2rem;
border-radius: 50px;
margin: 0 10px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tab-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
}
.tab-btn.active {
background: linear-gradient(45deg, #ff8c00, #ffd700);
color: #1a2980;
font-weight: bold;
box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
}
.content-section {
display: none;
animation: fadeIn 0.8s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.content-section.active {
display: block;
}
.countdown {
background: rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 30px;
margin: 30px auto;
max-width: 800px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.countdown-title {
font-size: 1.8rem;
margin-bottom: 25px;
color: #ffd700;
}
.timer {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.timer-box {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px 15px;
min-width: 120px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.timer-box:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
.timer-value {
font-size: 3.5rem;
font-weight: bold;
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.timer-label {
font-size: 1.1rem;
margin-top: 10px;
opacity: 0.8;
}
.motivational-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 40px 0;
}
.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.card i {
font-size: 3.5rem;
color: #ffd700;
margin-bottom: 20px;
}
.card h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #ffd700;
}
.card p {
line-height: 1.8;
font-size: 1.1rem;
}
.quote {
font-style: italic;
margin-top: 15px;
padding: 15px;
border-left: 3px solid #ffd700;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 10px 10px 0;
}
.tips-section {
background: rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 40px;
margin: 50px 0;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.section-title {
text-align: center;
font-size: 2.2rem;
margin-bottom: 30px;
color: #ffd700;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.tip-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
display: flex;
align-items: flex-start;
gap: 15px;
}
.tip-item i {
color: #ffd700;
font-size: 1.8rem;
min-width: 40px;
padding-top: 5px;
}
.tip-content h4 {
font-size: 1.4rem;
margin-bottom: 10px;
color: #ffd700;
}
.encouragement {
text-align: center;
padding: 50px 20px;
font-size: 2.2rem;
font-weight: bold;
margin: 40px 0;
background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
border-radius: 20px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
footer {
text-align: center;
padding: 30px;
margin-top: 40px;
font-size: 1.1rem;
opacity: 0.8;
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.tab-btn {
padding: 12px 25px;
font-size: 1rem;
margin-bottom: 10px;
}
.timer-box {
min-width: 80px;
padding: 15px 10px;
}
.timer-value {
font-size: 2.2rem;
}
.encouragement {
font-size: 1.6rem;
padding: 30px 15px;
}
.tips-section {
padding: 25px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
.timer-box {
min-width: 70px;
}
.timer-value {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-graduation-cap"></i> 高考加油 & 中考加油</h1>
<p class="subtitle">青春无悔，奋斗最美！无论高考还是中考，都是人生的重要里程碑。愿你以梦为马，不负韶华，全力以赴，创造属于自己的辉煌！</p>
<div class="tabs">
<button class="tab-btn active" data-tab="gaokao">高考加油</button>
<button class="tab-btn" data-tab="zhongkao">中考加油</button>
</div>
</header>
<!-- 高考内容部分 -->
<section id="gaokao-content" class="content-section active">
<div class="countdown">
<h2 class="countdown-title">2025年高考倒计时</h2>
<div class="timer">
<div class="timer-box">
<div class="timer-value" id="days-gaokao">365</div>
<div class="timer-label">天</div>
</div>
<div class="timer-box">
<div class="timer-value" id="hours-gaokao">00</div>
<div class="timer-label">小时</div>
</div>
<div class="timer-box">
<div class="timer-value" id="minutes-gaokao">00</div>
<div class="timer-label">分钟</div>
</div>
<div class="timer-box">
<div class="timer-value" id="seconds-gaokao">00</div>
<div class="timer-label">秒钟</div>
</div>
</div>
</div>
<div class="motivational-section">
<div class="card">
<i class="fas fa-brain"></i>
<h3>智慧备考</h3>
<p>科学规划时间，掌握核心考点，理解重于记忆。制定合理的复习计划，注重知识体系的构建。</p>
<p class="quote">"博观而约取，厚积而薄发。" --- 苏轼</p>
</div>
<div class="card">
<i class="fas fa-heart"></i>
<h3>心态调整</h3>
<p>保持平和心态，相信自己的努力。适度的压力是动力，过度的焦虑是阻力。学会放松，保持自信。</p>
<p class="quote">"非淡泊无以明志，非宁静无以致远。" --- 诸葛亮</p>
</div>
<div class="card">
<i class="fas fa-running"></i>
<h3>坚持到底</h3>
<p>高考是场马拉松，坚持到最后才是胜利。每天进步一点点，积少成多，终将迎来质的飞跃。</p>
<p class="quote">"路漫漫其修远兮，吾将上下而求索。" --- 屈原</p>
</div>
</div>
<div class="encouragement">
乾坤未定，你我皆是黑马！高考必胜！
</div>
<div class="tips-section">
<h2 class="section-title">高考备考小贴士</h2>
<div class="tips-grid">
<div class="tip-item">
<i class="fas fa-book"></i>
<div class="tip-content">
<h4>回归基础</h4>
<p>最后阶段要回归课本，巩固基础知识，确保基础题不丢分。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-clock"></i>
<div class="tip-content">
<h4>时间管理</h4>
<p>模拟真实考试环境进行限时训练，提高答题速度和准确率。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-utensils"></i>
<div class="tip-content">
<h4>健康饮食</h4>
<p>保持均衡饮食，多吃蔬菜水果，适量补充蛋白质，避免油腻食物。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-bed"></i>
<div class="tip-content">
<h4>规律作息</h4>
<p>调整生物钟，保证充足睡眠，确保考试时段精力充沛。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 中考内容部分 -->
<section id="zhongkao-content" class="content-section">
<div class="countdown">
<h2 class="countdown-title">2025年中考倒计时</h2>
<div class="timer">
<div class="timer-box">
<div class="timer-value" id="days-zhongkao">120</div>
<div class="timer-label">天</div>
</div>
<div class="timer-box">
<div class="timer-value" id="hours-zhongkao">00</div>
<div class="timer-label">小时</div>
</div>
<div class="timer-box">
<div class="timer-value" id="minutes-zhongkao">00</div>
<div class="timer-label">分钟</div>
</div>
<div class="timer-box">
<div class="timer-value" id="seconds-zhongkao">00</div>
<div class="timer-label">秒钟</div>
</div>
</div>
</div>
<div class="motivational-section">
<div class="card">
<i class="fas fa-lightbulb"></i>
<h3>高效学习</h3>
<p>掌握学习方法比死记硬背更重要。学会总结归纳，建立知识网络，提高学习效率。</p>
<p class="quote">"学而不思则罔，思而不学则殆。" --- 孔子</p>
</div>
<div class="card">
<i class="fas fa-balance-scale"></i>
<h3>均衡发展</h3>
<p>不要偏科，各科均衡发展才能取得理想成绩。合理安排各科复习时间，扬长补短。</p>
<p class="quote">"不积跬步，无以至千里；不积小流，无以成江海。" --- 荀子</p>
</div>
<div class="card">
<i class="fas fa-users"></i>
<h3>团队协作</h3>
<p>与同学组成学习小组，互相讨论、互相提问，共同进步。分享学习心得，解决疑难问题。</p>
<p class="quote">"独学而无友，则孤陋而寡闻。" --- 《礼记》</p>
</div>
</div>
<div class="encouragement">
今日拼搏努力，他朝谁与争锋！中考加油！
</div>
<div class="tips-section">
<h2 class="section-title">中考备考小贴士</h2>
<div class="tips-grid">
<div class="tip-item">
<i class="fas fa-pencil-alt"></i>
<div class="tip-content">
<h4>规范答题</h4>
<p>注意答题规范，书写工整，步骤清晰，避免不必要的扣分。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-redo"></i>
<div class="tip-content">
<h4>错题整理</h4>
<p>建立错题本，定期回顾，分析错误原因，避免重复犯错。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-dumbbell"></i>
<div class="tip-content">
<h4>适度运动</h4>
<p>每天保持适量运动，如散步、慢跑等，缓解压力，增强体质。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-mobile-alt"></i>
<div class="tip-content">
<h4>减少干扰</h4>
<p>学习时远离手机等电子设备，创造安静的学习环境，提高专注力。</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>© 2025 加油吧！学子们 | 高考中考加油专题</p>
<p>愿每一位学子都能发挥最佳水平，实现心中梦想！</p>
</footer>
</div>
<script>
// 切换标签页
document.querySelectorAll('.tab-btn').forEach(button => {
button.addEventListener('click', () => {
// 更新按钮状态
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
// 显示对应内容
const tabId = button.getAttribute('data-tab');
document.querySelectorAll('.content-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(`${tabId}-content`).classList.add('active');
});
});
// 倒计时函数
function updateCountdown(targetDate, daysId, hoursId, minutesId, secondsId) {
const now = new Date().getTime();
const distance = targetDate - now;
if (distance < 0) {
// 考试已结束
document.getElementById(daysId).textContent = "0";
document.getElementById(hoursId).textContent = "0";
document.getElementById(minutesId).textContent = "0";
document.getElementById(secondsId).textContent = "0";
return;
}
// 计算天、时、分、秒
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 更新显示
document.getElementById(daysId).textContent = days;
document.getElementById(hoursId).textContent = hours.toString().padStart(2, '0');
document.getElementById(minutesId).textContent = minutes.toString().padStart(2, '0');
document.getElementById(secondsId).textContent = seconds.toString().padStart(2, '0');
}
// 设置高考日期 (2025年6月7日)
const gaokaoDate = new Date("June 7, 2025 09:00:00").getTime();
// 设置中考日期 (2025年6月20日)
const zhongkaoDate = new Date("June 20, 2025 09:00:00").getTime();
// 初始化倒计时
updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");
updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");
// 每秒更新一次倒计时
setInterval(() => {
updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");
updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");
}, 1000);
// 添加卡片悬停效果
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-10px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html>
功能亮点
-
双主题设计：通过标签页切换高考和中高考内容
-
动态倒计时：
-
高考倒计时（2025年6月7日）
-
中考倒计时（2025年6月20日）
-
-
励志内容：
-
三个激励卡片（智慧备考、心态调整、坚持到底）
-
备考小贴士板块
-
鼓舞人心的名言名句
-
-
视觉设计：
-
蓝金色渐变主题，象征希望与成功
-
卡片悬停动画效果
-
标题发光动画
-
响应式设计，适配各种设备
-
-
交互体验：
-
平滑的标签切换动画
-
卡片悬停效果
-
动态更新的倒计时
-
最后希望所有高考生和中考生旗开得胜，拔得头魁
-