当前位置：首页 > news >正文

HTML做成一个端午节炫酷页面

news 文章来源：https://blog.csdn.net/qq_33851668/article/details/139564435 2024/11/8 18:02:51

做成端午节页面之前，先了解一下端午节的由来：

1.起源与历史：

端午节起源于中国，始于春秋战国时期，至今已有2000多年历史。

最初是古代百越地区（长江中下游及以南一带）崇拜龙图腾的部族举行图腾祭祀的节日。百越之地在春秋之前已有在农历五月初五以龙舟竞渡形式举行部落图腾祭祀的习俗。

2.纪念屈原：

战国时期的楚国（今湖北）诗人屈原在该日抱石跳汨罗江自尽。

统治者为树立忠君爱国标签，将端午作为纪念屈原的节日。屈原是中国最早的大诗人之一，其爱国精神和诗歌才华深受人民敬仰。

3.其他纪念对象：

除了屈原，部分地区也有纪念伍子胥、曹娥等历史人物的说法。

伍子胥是春秋时期楚国人，为报杀父兄之仇助吴伐楚，后被吴王夫差赐死，民间相传端午节亦为纪念伍子胥之日。

曹娥是东汉上虞人，因父亲溺于江中，昼夜沿江号哭，后亦投江，五日后抱出父尸，人们为纪念其孝节而兴建曹娥庙。

4.节日性质：

端午节原本是夏季的一个驱除瘟疫的节日。人们通过举行各种仪式和习俗，祈求平安、健康。

端午节也是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。

5.节日活动：

自古以来，端午节便有划龙舟及食粽等节日活动。这些活动不仅丰富了人们的文化生活，也传承了端午节的传统文化。

6.国际地位：

2008年起，端午节被列为国家法定节假日。

2006年5月，国务院将端午节列入首批国家级非物质文化遗产名录。

2009年9月，联合国教科文组织正式审议并批准中国端午节列入世界非物质文化遗产，成为中国首个入选世界非遗的节日。

要创建一个端午节的炫酷页面，我们可以结合HTML、CSS和JavaScript来创建一些动画效果、3D效果和交互元素。以下是一个简单的示例，展示了如何制作一个带有炫酷元素的端午节页面：

<!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;display: flex;justify-content: center;align-items: center;height: 100vh;background: #f2f2f2;font-family: Arial, sans-serif;overflow: hidden;}.container {perspective: 1200px;transform-style: preserve-3d;}.dragon-boat {width: 300px;height: auto;position: relative;animation: rotate 5s infinite linear;transform-style: preserve-3d;}.dragon-boat img {width: 100%;height: auto;position: absolute;top: 0;left: 0;}.dragon-boat img:nth-child(1) {transform: rotateY(0deg) translateZ(150px);}.dragon-boat img:nth-child(2) {transform: rotateY(120deg) translateZ(150px);}.dragon-boat img:nth-child(3) {transform: rotateY(240deg) translateZ(150px);}@keyframes rotate {0% { transform: rotateY(0deg); }100% { transform: rotateY(1turn); }}.greeting {position: absolute;font-size: 2rem;color: #fff;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);z-index: 10;animation: fadeIn 2s ease-out forwards;}@keyframes fadeIn {0% { opacity: 0; transform: translateY(-20px); }100% { opacity: 1; transform: translateY(0); }}</style>
</head>
<body><div class="container"><div class="dragon-boat"><img class="_three-img_dbazv_111 long-press-able-img " src="dragon-boat-1.png" alt="龙舟1"><img class="_three-img_dbazv_111 long-press-able-img " src="dragon-boat-2.png" alt="龙舟2"><img class="_three-img_dbazv_111 long-press-able-img " src="dragon-boat-3.png" alt="龙舟3"><!-- 使用不同角度的龙舟图片来创建3D效果 --></div></div><h1 class="greeting">端午节快乐！</h1><!-- 你可以在这里添加更多的JavaScript代码来实现更复杂的交互效果 --></body>
</html>

在这个示例中，我们使用CSS3D变换来创建一个旋转的龙舟效果。我们为龙舟图片添加了多个副本，并使用不同的rotateY和translateZ值来创建3D效果。同时，我们还添加了一个简单的淡入动画到问候语上。

请注意，你需要替换dragon-boat-1.png、dragon-boat-2.png和dragon-boat-3.png为你自己的龙舟图片，并确保这些图片是龙舟从不同角度拍摄的，以便创建3D效果。

你还可以使用JavaScript来添加更多的交互效果，例如点击事件、鼠标移动事件等。你可以根据自己的需要和想象力来扩展这个页面，添加更多的炫酷元素。

HTML做成一个端午节炫酷页面

做成端午节页面之前，先了解一下端午节的由来： 1.起源与历史： 端午节起源于中国，始于春秋战国时期，至今已有2000多年历史。最初是古代百越地区（长江中下游及以南一带）崇拜龙图腾的部族举行图…...

编程日记 2024/6/10 20:37:31

解决Ubuntu系统/usr/lib/xorg/Xorg占用显卡内存问题原创

在Ubuntu系统中，/usr/lib/xorg/Xorg进程占用显卡内存的问题可能会影响系统性能，特别是在使用GPU进行计算任务时。以下是一些解决方法，可以帮助你减少或解决这个问题： 1. 更新显卡驱动首先，确保你使用的是最新版本的…...

编程日记 2024/6/10 20:36:30

【Activiti7系列】基于Spring Security的Activiti7工作流管理系统简介及实现（附源码）（下篇）

作者：后端小肥肠上篇：【Activiti7系列】基于Spring Security的Activiti7工作流管理系统简介及实现（上篇）_spring security activiti7-CSDN博客目录 1.前言 2. 核心代码 2.1. 流程定义模型管理 2.1.1. 新增流程定义模型数据 …...

编程日记 2024/6/10 20:35:29

解密Spring Boot：深入理解条件装配与条件注解

文章目录一、条件装配概述1.1 条件装配的基本原理1.2 条件装配的作用二、常用注解2.1 ConditionalOnClass2.2 ConditionalOnBean2.3 ConditionalOnProperty2.4 ConditionalOnExpression2.5 ConditionalOnMissingBean 三、条件装配的实现原理四、实际案例一、条件装配概述 1…...

编程日记 2024/6/10 20:32:26

【数据结构与算法】使用数组实现栈：原理、步骤与应用

💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏：《数据结构与算法》期待您的关注目录一、引言 🎄栈（Stack）是什么？ &#x1…...

编程日记 2024/6/10 20:31:24

cell的复用机制和自定义cell

cell的复用机制和自定义cell UITableView 在学习cell之前，我们需要先了解UITableView。UITableView继承于UIScrollView，拥有两个两个相关协议 UITableViewDelegate和UITableViewDataSource，前者用于显示单元格，设置行高以及对单…...

编程日记 2024/6/10 20:30:23

Redis 双写一致原理篇

前言我们都知道,redis一般的作用是顶在mysql前面做一个"带刀侍卫"的角色,可以缓解mysql的服务压力,但是我们如何保证数据库的数据和redis缓存中的数据的双写一致呢,我们这里先说一遍流程,然后以流程为切入点来谈谈redis和mysql的双写一致性是如何保证的吧流程首先…...

编程日记 2024/6/10 20:26:20

《软件定义安全》之四：什么是软件定义安全

第4章什么是软件定义安全 1.软件定义安全的含义 1.1 软件定义安全的提出虚拟化、云计算、软件定义架构的出现，对安全体系提出了新的挑战。如果要跟上网络演进的步伐和业务快速创新的速度，安全体系应该朝以下方向演变。 𝟭 安全机制软件…...

编程日记 2024/6/10 20:25:19

将AIRNet集成到yolov8中，实现端到端训练与推理

AIRNet是一个图像修复网络，支持对图像进行去雾、去雨、去噪声的修复。其基于对比的退化编码器（CBDE），将各种退化类型统一到同一嵌入空间；然后，基于退化引导恢复网络（DGRN）将嵌入空间修复为目标图像。可以将AIRNet的输出与yolov8进行端到端集成，实现部署上的简化。本博…...

编程日记 2024/6/10 20:24:18

hcache缓存查看工具

1、hcache概述 hcache是基于pcstat的，pcstat可以查看某个文件是否被缓存和根据进程pid来查看都缓存了哪些文件。hcache在其基础上增加了查看整个操作系统Cache和根据使用Cache大小排序的特性。官网:https://github.com/silenceshell/hcache 2、hcache安装 2.1下载…...

编程日记 2024/6/10 20:21:16

Java 数据类型 -- Java 语言的 8 种基本数据类型、字符串与数组

大家好，我是栗筝i，这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 004 篇文章，在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验，并希望进…...

编程日记 2024/6/10 20:20:15

kafka-生产者事务-数据传递语义事务介绍事务消息发送（SpringBoot整合Kafka）

文章目录 1、kafka数据传递语义2、kafka生产者事务3、事务消息发送3.1、application.yml配置3.2、创建生产者监听器3.3、创建生产者拦截器3.4、发送消息测试3.5、使用Java代码创建主题分区副本3.6、屏蔽 kafka debug 日志 logback.xml3.7、引入spring-kafka依赖3.8、控制台日志…...

编程日记 2024/6/10 20:19:12

免费！GPT-4o发布，实时语音视频丝滑交互

We’re announcing GPT-4o, our new flagship model that can reason across audio, vision, and text in real time. 5月14日凌晨，OpenAI召开了春季发布会，发布会上公布了新一代旗舰型生成式人工智能大模型【GPT-4o】，并表示该模型对所有免费…...

编程日记 2024/6/10 20:17:10

DevOps的原理及应用详解（四）

本系列文章简介：在当今快速变化的商业环境中，企业对于软件交付的速度、质量和安全性要求日益提高。传统的软件开发和运维模式已经难以满足这些需求，因此，DevOps（Development和Operations的组合）应运而生，成为了解决这些问题的有效方法。 DevOps是一种强调软件开发人员（…...

编程日记 2024/6/10 20:16:09

关于选择，关于处事

一个人选择应该选择的是勇敢，选择不应该选择的是无奈。放弃，不该放弃的是懦夫，不放弃应该放弃的是睿智。所以，碰到事的时候要先静，先不管什么事，先静下来，先淡定，先从容。在生活里要…...

编程日记 2024/6/10 20:15:08

大话设计模式解读02-策略模式

本篇文章，来解读《大话设计模式》的第2章——策略模式。并通过Qt和C代码实现实例代码的功能。 1 策略模式策略模式作为一种软件设计模式，指对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。策略模式的特点&#…...

编程日记 2024/6/10 20:14:07

展会邀请 | 龙智即将亮相2024上海国际嵌入式展，带来安全合规、单一可信数据源、可追溯、高效协同的嵌入式开发解决方案

2024年6月12日至14日，备受全球嵌入式系统产业和社群瞩目的2024上海国际嵌入式展（embedded world china 2024）即将盛大开幕，龙智将携行业领先的嵌入式开发解决方案亮相 640展位。此次参展，龙智将全面展示专为嵌入式行…...

编程日记 2024/6/10 20:11:02

codeforce round951 div2

A guess the maximum 问题： 翻译一下就是求所有相邻元素中max - 1的最小值代码： #include <iostream> #include <algorithm>using namespace std;const int N 5e4;int a[N]; int n;void solve() {cin >> n;int ans 0x3f3f3f3f;…...

编程日记 2024/6/10 20:10:01

arcgis开发记录

目录文章目录 [toc]**arcgis JavaScript API安装**1. arcgisAPI下载地址：https://developers.arcgis.com/downloads/2. 4.4版本API：本地配置3. 3.18版本修改方法 **angular2中加载arcgis JS API**** arcgis加载图层并显示图层上点的信息****使用图层上…...

编程日记 2024/6/10 20:09:00

RPA-UiBot6.0数据整理机器人—杂乱数据秒变报表

前言友友们是否常常因为杂乱的数据而烦恼？数据分类、排序、筛选这些繁琐的任务是否占据了友友们的大部分时间？这篇博客将为友友们带来一个新的解决方案，让我们共同学习如何运用RPA数据整理机器人，实现杂乱数据的快速整理，为你的工作减负增效！在这里，友友们将了…...

编程日记 2024/6/10 20:05:57

Application UI

本节包含关于如何用DevExpress控件模拟许多流行的应用程序ui的教程。 Windows 11 UI Windows 11和最新一代微软Office产品启发的UI。 Office Inspired UI Word、Excel、PowerPoint和Visio等微软Office应用程序启发的UI。如何：手动构建Office风格的UI 本教程演示…...

编程日记 2024/6/10 20:04:56

关于 Redis 中集群

哨兵机制中总结到，它并不能解决存储容量不够的问题，但是集群能。广义的集群：只要有多个机器，构成了分布式系统，都可以称之为一个“集群”，例如主从结构中的哨兵模式。狭义的集群：redis 提供的…...

编程日记 2024/6/10 20:00:52

C++必修：探索C++的内存管理

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯，先赞后看哦~🎈🎈 所属专栏：C学习贝蒂的主页：Betty’s blog 1. C/C的内存分布我们首先来看一段代码及其相关问题 int globalVar 1; static…...

编程日记 2024/6/10 19:59:51

python列表---基本语法（浅拷贝，深拷贝等）

文章目录引言：列表的注意事项1 list中的浅拷贝与深拷贝1.1浅拷贝（Shallow Copy）浅拷贝的方法浅拷贝的效果1.2深拷贝（Deep Copy）深拷贝的方法深拷贝的效果1.3 总结：浅拷贝 vs 深拷贝1.4 为什么浅拷贝顶层元素如果是不可变数据就不能共享，不是传的是引用就相当于传的是地…...

编程日记 2024/6/10 19:58:50

go语言接口之sort.Interface接口

排序操作和字符串格式化一样是很多程序经常使用的操作。尽管一个最短的快排程序只要15 行就可以搞定，但是一个健壮的实现需要更多的代码，并且我们不希望每次我们需要的时候都重写或者拷贝这些代码。幸运的是，sort包内置的提供了根据一些排序…...

编程日记 2024/6/10 19:57:49

android:text 总为大写字母的原因

当设置某个 Button 的 text 为英文时，界面上显示的是该英文的大写形式（uppercase）。例如： <Buttonandroid:id"id/btn"android:layout_width"wrap_content"android:layout_height"wrap_content"…...

编程日记 2024/6/10 19:55:46

CISCN2024 初赛 wp 部分复现（Re）

Misc 1. 火锅链观光打卡答题即可 Re 1. asm_re 感谢智谱清言，可以读出大致加密算法这是输入这是加密部分这里判断找到疑似密文的部分，手动改一下端序 #asm_wp def dec(char):return (((char - 0x1E) ^ 0x4D) - 0x14) // 0x50 #return (ord(cha…...

编程日记 2024/6/10 19:53:45

YOLOv10、YOLOv9 和 YOLOv8 在实际视频中的对比

引言目标检测技术是计算机视觉领域的核心任务之一，YOLO（You Only Look Once）系列模型凭借其高效的检测速度和准确率成为了业界的宠儿。本文将详细对比YOLOv10、YOLOv9和YOLOv8在实际视频中的表现，探讨它们在性能、速度和实际应用…...

编程日记 2024/6/10 19:52:43

热题系列章节5

169. 多数元素给定一个大小为 n 的数组，找到其中的多数元素。多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。示例 1: 输入: [3,2,3] 输出: 3 示例 2: 输入: [2,2,1,1,1,2,2] 输出:…...

编程日记 2024/6/10 19:51:40

二维： 1、创建vue项目 npm create vitelatest 2、安装ArcGIS JS API依赖包 npm install arcgis/core 3、引入ArcGIS API for JavaScript模块 <script setup> import "arcgis/core/assets/esri/themes/light/main.css"; import Map from arcgis…...

编程日记 2024/6/10 19:50:39

百度搜索推广流程/上海好的seo公司

用 pcap_next_ex() 函数代替 _5_ 中的 pcap_loop()函数； pcap_loop()函数是基于回调的原理来进行数据捕获，这是一种精妙的方法，并且在某些场合中，它是一种很好的选择。然而，处理回调有时候并不实用 -- 它会增加程序的…...

编程日记 2024/11/8 14:29:37

温州优化网站方法/app优化网站

在练习循环删除list中元素时遇到了一点问题。最开始写的代码是 for i in range(len(list)):del list[i] 这样写到后来会报错，原因是随着列表元素的删除和i的增加，对列表元素的访问会越界。后来改成了如下代码 while i < len(list):del list1[i] 结果…...

编程日记 2024/11/8 13:42:18

校园网站建设意见/百度指数的搜索指数代表什么

虚拟机的堆内存共划分为三个代：年轻代（Young Generation）、年老代（Old Generation）和持久代（PermanentGeneration）。其中持久代主要存放的是Java类的类信息，与垃圾收集器要收集的Jav…...

编程日记 2024/11/8 12:20:42

怎么网站建设怎么样/百度竞价排名多少钱

作者：alben来源：https://albenw.github.io/posts/69a9647f/ 概要 Spring实现了一套重试机制，功能简单实用。Spring Retry是从Spring Batch独立出来的一个功能，已经广泛应用于Spring Batch,Spring Integration, Spring for Apach…...

编程日记 2024/11/8 12:18:42