HTML5+CSS+JS制作中秋佳节页面
中秋节，是中国民间的传统节日。每年农历八月十五庆祝。
在中秋节这一天，人们会通过各种方式庆祝，其中最重要的活动之一就是赏月。家人团聚在一起，共同欣赏明亮的月亮。同时，吃月饼也是中秋节不可或缺的传统习俗，月饼象征着团圆和美满，寄托了人们对幸福生活的向往。
下面HTML5+CSS+JS制作中秋佳节页面
先看效果图
下面给出源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中秋佳节</title><style>body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #001f3f;overflow: hidden;font-family: 'Arial', sans-serif;}.container {text-align: center;color: #fff;display: flex;flex-direction: column;align-items: center;}h1 {font-size: 3em;color: #ff5733; /* 设置标题颜色为亮红色#ff5733 或金色#ffcc00 */margin-bottom: 20px;animation: rotate 10s linear infinite;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.marquee {display: inline-block;animation: marquee 5s linear infinite;}@keyframes marquee {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}}.moon {width: 200px;height: 200px;background-color: #ffd700; /* 设置moon颜色 #ffd700*/border-radius: 50%;box-shadow: 0 0 20px #ffd700; /* 设置moon颜色 #ffd700 */ margin: 0 auto 20px;position: relative;overflow: hidden;}.crater {position: absolute;background-color: #e6c300;border-radius: 50%;}.star {position: absolute;background-color: #fff;width: 2px;height: 2px;border-radius: 50%;}#poem {font-style: italic;font-size: 1.5rem; /* 设置段落字体大小 */margin-top: 20px;}.mooncake {width: 100px;height: 100px;background-color: #d4a017;border-radius: 50%;position: relative;margin: 20px; /* 适当的边距 */box-shadow: inset 0 0 20px #b8860b;}.mooncake::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 60px;height: 60px;background-color: #ffd700;border-radius: 50%;box-shadow: inset 0 0 10px #d4a017;}.mooncake::after {content: "月";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 24px;color: #8b4513;}.mooncakes-container {display: flex; /* Flex 布局 */justify-content: center; /* 水平居中 */margin-top: 20px; /* 增加顶边距 */}</style>
</head>
<body><div class="container"><div class="moon" id="moon"></div><h1 class="marquee">中秋佳节快乐！</h1><p id="poem">月圆人团圆，愿你与家人共度美好时光！</p><div class="mooncakes-container"><div class="mooncake"></div> <!-- 月饼 --><div class="mooncake"></div> <!-- 月饼 --></div></div><script>// 创建月球表面的陨石坑function createCraters() {const moon = document.getElementById('moon');for (let i = 0; i < 10; i++) {const crater = document.createElement('div');crater.classList.add('crater');crater.style.width = Math.random() * 30 + 10 + 'px';crater.style.height = crater.style.width;crater.style.top = Math.random() * 160 + 'px';crater.style.left = Math.random() * 160 + 'px';moon.appendChild(crater);}}// 创建星星背景function createStars() {for (let i = 0; i < 100; i++) {const star = document.createElement('div');star.classList.add('star');star.style.top = Math.random() * 100 + 'vh';star.style.left = Math.random() * 100 + 'vw';document.body.appendChild(star);}}// 月亮晃动效果function moonWobble() {const moon = document.getElementById('moon');setInterval(() => {moon.style.transform = `translate(${Math.random() * 10 - 5}px, ${Math.random() * 10 - 5}px)`;}, 1000);}// 初始化createCraters();createStars();moonWobble();</script>
</body>
</html>
