- 响应式设计：在手机和电脑上都能完美显示。
- 现代美观：使用了渐变背景、阴影和动画效果。
- 交互功能：
- 一个可以实时显示当前时间的动态时钟。
- 一个可以发送祝福语的留言板。
- 一个点击可以播放音效的“点击赏月”按钮。
- 节日元素：包含了月亮、玉兔、灯笼、桂花等中秋元素的图片和文字描述。
最终效果预览
您可以直接将下面的代码保存为 .html 文件，然后用浏览器打开即可看到效果。
（图片来源网络，侵删）
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">中秋佳节，月满情浓</title>
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
background: linear-gradient(to bottom, #0c1445, #1a237e, #283593);
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
/* --- 头部样式 --- */
header {
text-align: center;
padding: 40px 20px;
position: relative;
}
h1 {
font-size: 3.5rem;
color: #ffd54f;
text-shadow: 0 0 20px rgba(255, 213, 79, 0.5);
margin-bottom: 10px;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 20px rgba(255, 213, 79, 0.5); }
to { text-shadow: 0 0 30px rgba(255, 213, 79, 0.8), 0 0 40px rgba(255, 213, 79, 0.6); }
}
.subtitle {
font-size: 1.2rem;
color: #e0e0e0;
}
/* --- 主内容区 --- */
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
/* --- 卡片通用样式 --- */
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
.card h2 {
color: #ffd54f;
margin-bottom: 15px;
font-size: 1.8rem;
}
.card p {
line-height: 1.6;
color: #e0e0e0;
}
/* --- 时钟样式 --- */
#clock {
font-size: 2.5rem;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* --- 图片样式 --- */
.moon-container {
text-align: center;
margin: 20px 0;
}
.moon-img {
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 50px rgba(255, 255, 255, 0.8), 0 0 100px rgba(255, 255, 255, 0.4);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* --- 留言板样式 --- */
#messageBoard {
margin-top: 20px;
}
#messageInput {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 1rem;
margin-bottom: 10px;
}
#messageInput::placeholder {
color: rgba(255, 255, 255, 0.7);
}
#submitBtn {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background: #ffd54f;
color: #333;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
}
#submitBtn:hover {
background: #ffecb3;
}
.messages {
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
}
.message-item {
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- 赏月按钮样式 --- */
.moon-button {
display: block;
margin: 30px auto;
padding: 15px 40px;
font-size: 1.2rem;
background: linear-gradient(45deg, #ffd54f, #ffb300);
color: #333;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(255, 213, 79, 0.4);
transition: all 0.3s ease;
}
.moon-button:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(255, 213, 79, 0.6);
}
.moon-button:active {
transform: scale(0.98);
}
/* --- 页脚样式 --- */
footer {
text-align: center;
padding: 30px 20px;
margin-top: 50px;
color: #bbb;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
main {
grid-template-columns: 1fr;
gap: 20px;
}
#clock {
font-size: 2rem;
}
}
</style>
</head>
<body>
<header>
<h1>中秋快乐</h1>
<p class="subtitle">但愿人长久，千里共婵娟</p>
</header>
<main>
<section class="card">
<h2>月下时光</h2>
<div id="clock">00:00:00</div>
<p>愿这轮明月，照亮你的前路，温暖你的心房，无论你身在何方，我们都共享着同一片月光。</p>
</section>
<section class="card">
<h2>中秋传说</h2>
<div class="moon-container">
<img src="https://i.postimg.cc/0Yn0d2Lj/moon.png" alt="月亮" class="moon-img">
</div>
<p>相传，月中有广寒宫，住着美丽的嫦娥仙子和她的小玉兔，每逢中秋，玉兔会在月桂树下捣药，为人们带来安康与祝福。</p>
</section>
<section class="card" id="messageBoard">
<h2>许下心愿</h2>
<p>写下你的中秋祝福，让美好的心愿随月光传递。</p>
<textarea id="messageInput" rows="3" placeholder="在此输入你的祝福..."></textarea>
<button id="submitBtn">发送祝福</button>
<div class="messages" id="messagesContainer"></div>
</section>
<section class="card">
<h2>节日习俗</h2>
<p>中秋佳节，人们会全家团聚，共享丰盛的晚餐，饭后，品尝美味的月饼，象征团圆和美满，赏月、燃灯、猜灯谜也是传统的庆祝活动。</p>
<img src="https://i.postimg.cc/4yN6rQz1/lantern.png" alt="灯笼" style="width: 100%; border-radius: 10px; margin-top: 15px;">
</section>
</main>
<button class="moon-button" id="moonButton">点击赏月 🌕</button>
<footer>
<p>© 2025 中秋佳节网页 | 祝您阖家幸福，万事如意</p>
</footer>
<!-- 一个简单的点击音效 (使用Base64编码的短音频) -->
<audio id="clickSound" preload="auto">
<source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT" type="audio/wav">
</audio>
<script>
// --- 时钟功能 ---
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock(); // 立即执行一次
// --- 留言板功能 ---
const messageInput = document.getElementById('messageInput');
const submitBtn = document.getElementById('submitBtn');
const messagesContainer = document.getElementById('messagesContainer');
submitBtn.addEventListener('click', function() {
const message = messageInput.value.trim();
if (message) {
const messageItem = document.createElement('div');
messageItem.className = 'message-item';
messageItem.textContent = message;
messagesContainer.appendChild(messageItem);
messageInput.value = ''; // 清空输入框
}
});
// --- 点击赏月功能 ---
const moonButton = document.getElementById('moonButton');
const clickSound = document.getElementById('clickSound');
moonButton.addEventListener('click', function() {
// 播放音效
clickSound.currentTime = 0; // 重置音频到开头
clickSound.play().catch(e => console.log("音频播放失败:", e)); // 处理可能的播放失败
// 创建一个临时的“月光”效果
const moonGlow = document.createElement('div');
moonGlow.style.position = 'fixed';
moonGlow.style.top = '50%';
moonGlow.style.left = '50%';
moonGlow.style.width = '300px';
moonGlow.style.height = '300px';
moonGlow.style.background = 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)';
moonGlow.style.borderRadius = '50%';
moonGlow.style.transform = 'translate(-50%, -50%)';
moonGlow.style.pointerEvents = 'none'; // 不阻挡鼠标事件
moonGlow.style.zIndex = '1000';
document.body.appendChild(moonGlow);
// 动画结束后移除元素
setTimeout(() => {
moonGlow.style.transition = 'opacity 1s ease-out';
moonGlow.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(moonGlow);
}, 1000);
}, 100);
});
</script>
</body>
</html>
代码结构解析
-
<head>部分:meta charset="UTF-8": 确保浏览器正确显示中文。meta name="viewport" ...: 响应式设计的核心，让页面在移动设备上正确缩放。<title>: 网页标题，显示在浏览器标签页上。<style>: 内联CSS样式，定义了整个网页的外观。body: 设置了深蓝色渐变背景，营造夜空氛围。header: 标题区域，文字有发光动画效果。main: 使用CSS Grid布局，让内容区域在不同屏幕尺寸下自动排列。.card: 内容卡片样式，使用了毛玻璃效果 (backdrop-filter: blur(10px))，非常现代。@media: 响应式媒体查询，在小屏幕上调整字体大小和布局。
-
<body>部分:header: 包含主标题和副标题。main: 包含四个主要的功能卡片。- 月下时光: 一个简单的
<div>，用于显示时钟。 - 中秋传说: 包含月亮图片和相关文字。
- 许下心愿: 包含一个
<textarea>输入框、一个<button>和一个<div>用于显示留言。 - 节日习俗: 包含文字和一张灯笼图片。
- 月下时光: 一个简单的
<button class="moon-button">: 一个独立的、居中的赏月按钮。<footer>: 页脚，显示版权信息。<audio>: 一个隐藏的音频元素，用于播放点击音效，这里使用了一个简短的Base64编码的WAV音频，这样就不需要外部音频文件了。
-
<script>部分:- 时钟功能:
updateClock()函数获取当前时间，并格式化为HH:MM:SS的字符串，更新到时钟div中。setInterval(updateClock, 1000)设置一个定时器，每秒调用一次updateClock函数，实现动态时钟。
- 留言板功能:
- 为“发送祝福”按钮添加了点击事件监听器。
- 当点击时,获取输入框中的内容，创建一个新的
div元素作为留言项，并将其添加到留言容器中。 - 最后清空输入框。
- 点击赏月功能:
- 为赏月按钮添加了点击事件监听器。
- 点击时,播放音频，并创建一个临时的、半透明的白色圆形元素，模拟月光闪烁的效果，并在动画结束后将其从页面上移除。
- 时钟功能:
如何使用
- 复制代码: 将上面所有的代码复制到一个文本编辑器中（如 VS Code, Sublime Text, 或记事本）。
- 保存文件: 将文件另存为
mid_autumn_festival.html（或任何你喜欢的名字，但后缀必须是.html）。 - 打开文件: 找到你保存的文件，用任意现代浏览器（如 Chrome, Firefox, Edge）双击打开即可。
这个网页完全独立,包含了所有必要的样式和脚本，可以直接在浏览器中运行，希望你喜欢这个中秋主题的网页！
（图片来源网络，侵删）
