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

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

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来添加更多的交互效果,例如点击事件、鼠标移动事件等。你可以根据自己的需要和想象力来扩展这个页面,添加更多的炫酷元素。

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

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

相关文章

力扣算法题:跳跃游戏 -- 多语言实现

无意间看到&#xff0c;力扣存算法代码居然还得升级vip。。。好吧&#xff0c;我自己存吧 golang: func canJump(nums []int) bool {maxNum : 0n : len(nums)for i, _ : range nums {if i > maxNum {return false}maxNum max(maxNum, inums[i])if maxNum > n-1 {return…

生物神经网络 原理分析研读03

可能有用基础介绍 人类交互1 大脑视觉的处理过程 人类交互2 听觉处理和语言中枢 人类交互3 皮肤感觉与运动系统 人类交互4 感觉输入和运动输出 人类交互5 大脑信号编码与解码 黑箱模型的介绍 黑箱模型&#xff08;Black Box&#xff09;&#xff0c;或称经验模型&#xff0c…

找素数第二、三种方法

文章目录 第一种 &#xff1a;使用标签第二种&#xff1a;本质是方法的分装 第一种 &#xff1a;使用标签 没有使用信号量。break和continue作用范围只是最近的循环&#xff0c;无法控制外部循环。 此时使用标签 对外部循环进行操作。 package com.zhang; /* 找素数 第二种方…

MySQL—多表查询—外连接

一、引言 学到内连接&#xff0c;它是查询的数据两张表交集的部分。而接下来看看外连接。 外连接查询语法&#xff1a;&#xff08;分为两种&#xff09; 1、左外连接 语法结构&#xff1a; 表1 LEFT [OUTER] JOIN 表2 ON 条件 ...; ( ... left out join on ...) 注意&#x…

56.StampedLock

jdk8加入的,为了进一步优化读性能。比ReentrantReadWriteLock性能好。但是却无法完全替代。 特点:在使用读锁、写锁时都必须配合戳使用。 优化的点在于乐观读,乐观读没有加任何的锁。 乐观读,StampedLock支持tryOptimisticRead()方法(乐观读),读取完毕后需要做一次戳…

三、安全工程练习题(CISSP)

1.三、安全工程练习题(CISSP)

WordPress 高级缓存插件 W3 Total Cache Pro 详细配置教程

说起来有关 WordPress 缓存插件明月已经发表过不少文章了,但有关 W3 Total Cache Pro 这个 WordPress 高级缓存插件除了早期【网站缓存插件 W3 Total Cache,适合自己的才是最好的!】一文后就很少再提及了,最近因为明月另一个网站【玉满斋】因为某些性能上的需要准备更换缓存…

java —— 线程(一)

一、进程与线程 一个进程可以包含一个以上的线程&#xff0c;CPU 时间片切换的基本单位是线程。 二、创建线程 &#xff08;一&#xff09;继承 Thread 类 public class Task extends Thread{Override //重写run方法public void run(){System.out.pr…

心灵清闲

人本质上是喜欢清闲的生活的。所谓“清闲”&#xff0c;就是在为稻梁奔波的同时&#xff0c;还有一些可以用来喝酒、聊天、旅游的时间。 细细想来&#xff0c;一个人要活的惬意&#xff0c;光有生理上的清闲是不够的&#xff0c;还得有心灵的清闲。只是一个人要抵达生理上的清…

当前 Python 版本中所有保留字keyword.kwlist

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 当前 Python 版本中 所有保留字 keyword.kwlist [太阳]选择题 根据给定的Python代码&#xff0c;哪个选项是正确的&#xff1f; import keyword print("【执行】keyword.kwlist"…

【数据结构】KMP算法

1 KMP算法 KMP&#xff08;Knuth-Morris-Pratt&#xff09;算法是一种改进的字符串匹配算法&#xff0c;由D.E.Knuth、J.H.Morris和V.R.Pratt共同提出&#xff0c;用于在一个文本串&#xff08;主串&#xff09;中搜索一个词&#xff08;模式串&#xff09;的位置。KMP算法的关…

shell编程(四)—— 运算符

和其他编程语言一样&#xff0c;bash也有多种类型的运算符&#xff0c;本篇对bash的相关运算符做简单介绍。 一、运算符 1.1 算术运算符 常见的算术运算符&#xff0c;如加&#xff08;&#xff09;、减&#xff08;-&#xff09;、乘&#xff08;*&#xff09;、除&#xf…

如何提高逻辑性?(小妙招)

在现代社会中&#xff0c;逻辑性是一种至关重要的思维能力。不论是在工作、学习还是生活中&#xff0c;逻辑清晰的人总能更好地解决问题和做出决策。然而&#xff0c;如何提高逻辑性却是许多人头疼的问题。本文将从六个方面详细探讨如何提升逻辑性&#xff0c;包括细心态度、逼…

【网络架构】Nginx

目录 一、I/O模型 1.1 Linux 的 I/O 1.2 零拷贝技术 1.3 网络IO模型 1.3.1 阻塞型 I/O 模型&#xff08;blocking IO&#xff09;​编辑 1.3.2非阻塞型 I/O 模型 (nonblocking IO)​编辑 1.3.3 多路复用 I/O 型 ( I/O multiplexing )​编辑 1.3.4 信号驱动式 I/O 模型 …

leetcode:67二进制求和

题目链接&#xff1a;67. 二进制求和 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string addBinary(string a, string b) {int stralen a.size(), strblen b.size();int curtc;int Maxlen max(stralen, strblen);vector<int> stra;vector<i…

Python 学习flask创建项目

1、使用pycharm创建flask项目 2、运行访问地址 3、可以看到访问地址内容 4、可以增加路由&#xff0c;尝试访问获取参数

2024年的高考人工智能,你能把握住么?还能卷么?

背景&#xff1a; 随着国家针对人工智能出台的政策越来越多了&#xff0c;很多国企也纷纷进入了该行业进行了布局&#xff0c;就连2024这次的高考的语文作文都是人工智能。 高考作文&#xff1a;新课标I卷 阅读下面的材料&#xff0c;根据要求写作。&#xff08;60分&#xf…

【教程】在Linux系统上安装Docker和Docker Compose

介绍 Docker是一个开源的引擎&#xff0c;可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。Docker Compose是在使用Docker容器部署分布式应用时的工具&#xff0c;可以定义哪个容器运行哪个应用。使用Compose&#xff0c;你只需定义一个多容器应用的yml文件…

探讨如何实现数据同步的架构和网络协议

一、背景 (一)当前为了后端网络程序的高并发和高可用&#xff0c;总是需要多台服务器一起协调工作&#xff0c;它们可能负责不同的模块(属于分布式)&#xff0c;也可能多台提供相同的功能(属于集群)。 (二)为了解决读写分离的主从架构的数据库同步问题&#xff0c;需要数据库…

智能电网与微电网:引领电力未来的创新力量

随着能源需求持续增长和环保压力日益加大&#xff0c;电力行业正面临前所未有的挑战与机遇。在这一背景下&#xff0c;智能电网和微电网作为新兴的技术应用方向&#xff0c;以其独特的优势和潜力&#xff0c;正逐步成为推动电力领域可持续发展的关键力量。 智能电网&#xff0…