HTML5+CSS+JS制作中秋佳节页面

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/53594.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Delphi 12.1安卓APP开发中获取硬件信息及手机号

Demo与代码已上传到CSDN下载。 这里简单说一下代码内容&#xff0c;完整代码请自行下载&#xff0c;不清楚的欢迎留言交流。 前言 演示Demo使用了我自己开发的一个控件&#xff0c;TLayoutPro 《Delphi D10.3 LayoutsPro 控件简介 -避免输入焦点被虚拟键盘遮挡》请查看并下载控…

2024年【上海市安全员C证】考试题库及上海市安全员C证报名考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【上海市安全员C证】考试题库及上海市安全员C证报名考试&#xff0c;包含上海市安全员C证考试题库答案和解析及上海市安全员C证报名考试练习。安全生产模拟考试一点通结合国家上海市安全员C证考试最新大纲及上海…

Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件

在Web应用开发中&#xff0c;经常需要提供表格数据的编辑功能。本文将介绍如何使用Vue 3结合Element Plus库来实现一个支持单列控制编辑功能的表格&#xff0c;并通过封装组件的形式提高代码的复用性。通过本教程&#xff0c;你将学会如何构建一个具备单列控制编辑功能的表格组…

Vue2中使用ant-design的tab组件让他一行充满

使用tabs组件默认样式这样 想改成水平居中铺满如下&#xff1a; 需要改下css样式 /deep/ .ant-tabs-nav {width: 100%;& > div {width: 100%;display: flex;align-items: center;}.ant-tabs-tab {flex: 1;text-align: center;}}

为Hexo添加说说功能—Artitalk

文章目录 Artitalk部署LeanCloud配置Hexo Artitalk 基于 LeanCloud 实现的可实时发布说说/微语的 js Artitalk.js官方文档 官方文档其实讲述的很详细了&#xff0c;在此记录一下&#xff0c;方便以后维护。 另外欢迎来我的博客 火柴人儿的小站&#xff0c;本博客基于雨云服务器…

MongoDB延迟查询

在 MongoDB 中&#xff0c;查看副本集成员之间的副本延迟可以通过以下步骤进行&#xff1a; 使用 rs.status() 命令&#xff1a; 这个命令提供了副本集的详细状态信息&#xff0c;包括每个成员的延迟情况。在 MongoDB shell 中&#xff0c;你可以执行以下命令&#xff1a; rs.s…

斯坦福大学论文润色chat-gpt指令

Quick Prompts快速提示 To enhance text clarity-为了增强文本清晰度 As a non-native English speaker, kindly help me revise the following text for improved understand clarity. Please check for spelling and sentence structure errors and suggest alternatives.为…

15.2 JDBC数据库编程2

15.2.1 数据库访问步骤 使用JDBC API连接和访问数据库&#xff0c;一般分为以下5个步骤: (1) 加载驱动程序 (2) 建立连接对象 (3) 创建语句对象 (4) 获得SQL语句的执行结果 (5) 关闭建立的对象&#xff0c;释放资源 下面将详细描述这些步骤 15.2.2 加载驱动程序 要使…

山东省行政执法证照片要求及图像处理方法

在山东省&#xff0c;行政执法证是执法人员身份的重要标识&#xff0c;其照片的规范性对于证件的有效性至关重要。本文将详细介绍山东省行政执法证照片的要求&#xff0c;并提供使用手机相机拍照的实用方法&#xff0c;以确保照片符合标准。 一、山东省行政人员执法证照片拍摄要…

el-table实现当内容过多时,el-table显示滚动条,页面不显示滚动条

估计有不少小伙伴在开发公司的ERP使用el-table都会遇到这么一个问题&#xff0c;就是产品经理提出&#xff0c;页面不出现滚动条&#xff0c;因为不美观。但是当el-table内容过多&#xff0c;超过页面的宽度时候&#xff0c;页面就会有滚动条。那应该如何解决呢?能不能让滚动条…

MySQL 大量 IN 的查询优化

背景 &#xff08;1&#xff09;MySQL 8.0 版本 &#xff08;2&#xff09;业务中遇到大量 IN 的查询&#xff0c;例&#xff1a; SELECT id, username, icon FROM users WHERE id IN (123, 523, 1343, ...);其中 id 为主键&#xff0c;IN 的列表长度有 8000 多个 问题 …

c++开关灯

题目描述 现有 &#x1d45b;n 盏灯排成一排&#xff0c;从左到右依次编号为&#xff1a;11&#xff0c;22&#xff0c;……&#xff0c;&#x1d45b;n。然后依次执行 &#x1d45a;m 项操作。 操作分为两种&#xff1a; 指定一个区间 [&#x1d44e;,&#x1d44f;][a,b]&…

程序员和开发者如何写好一份简历入门

文章目录 引言简历结构 简历模板姓名个人简介教育背景工作经验高级Java开发工程师 | XX科技有限公司Java开发工程师 | YY信息技术有限公司 项目经验项目名称&#xff1a;ZZ在线教育平台 技能荣誉与奖项附加信息 引言 怎么写好一份开发人员简历 简历结构 个人信息&#xff1a;…

使用 `readResolve` 防止序列化破坏单例模式

单例模式是一种设计模式&#xff0c;其目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。在 Java 中&#xff0c;我们常常通过私有化构造方法和提供静态访问方法来实现单例。然而&#xff0c;尽管这些手段可以有效防止类的实例化&#xff0c;反射和序列化依然能…

百度静态资源瓦片nginx直接显示完整案例

案例地址&#xff1a;https://download.csdn.net/download/jinhuding/89733763 访问显示效果&#xff1a;(根据瓦片地址直接显示) http://172.16.39.203:8099/tiles/

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站&#xff0c;手机流量可以访问IPV6网络的服务&#xff0c;为什么不在电脑搭建Home Assistant&am…

卷积神经网络综述

摘要 本文对卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;进行了全面综述。首先介绍了卷积神经网络的发展历程&#xff0c;包括早期的理论基础和关键突破。接着详细阐述了卷积神经网络的结构组成&#xff0c;包括卷积层、池化层、全连接层…

使用生成式AI解读人们的真实意图

你可以使用生成式AI来辨别别人所说的话与他们的真实意思&#xff0c;这是一种非常有用的工具&#xff0c;懂得如何明智地使用它非常重要。 你是否曾经怀疑过别人对你说的话是否真正传达了他们的真实意思&#xff1f; 我敢肯定你有过这种经历。 有时候&#xff0c;人们说的一…

ONU测试需要那些协议的学习

在进行ONU&#xff08;Optical Network Unit&#xff0c;光网络单元&#xff09;的相关测试时&#xff0c;需要学习和掌握一系列协议和技术&#xff0c;以确保测试的有效性和准确性。这些协议主要涉及网络传输、设备管理、服务质量&#xff08;QoS&#xff09;等方面。以下是需…

敏捷开发解决的到底是什么问题?

随着信息化社会的快速发展&#xff0c;软件项目的开发方式也面临着不断更新和改进的压力。敏捷开发作为一种新兴的软件开发方法&#xff0c;因其高效、灵活和适应市场需求的能力&#xff0c;逐渐得到了广泛的关注和应用。 一、敏捷开发是什么&#xff1f; 百度百科中是这样解…