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

用HTML5+CSS+JavaScript庆祝国庆

news 2025/8/27 3:30:33

用HTML5+CSS+JavaScript庆祝国庆

中华人民共和国的国庆日是每年的10月1日。

1949年10月1日，中华人民共和国中央人民政府成立，在首都北京天安门广场举行了开国大典，中央人民政府主席毛泽东庄严宣告中华人民共和国成立，并亲手升起了第一面五星红旗。这一历史性的时刻标志着新中国的诞生。1949年12月2日，中央人民政府委员会第四次会议接受全国政协的建议，通过了《关于中华人民共和国国庆日的决议》，决定每年10月1日为中华人民共和国国庆日。

国庆日这一天，全国各地都会举行各种庆祝活动，如悬挂国旗、唱国歌、文艺演出、烟花表演等方式来庆祝这一重要节日。

现在，让我们用HTML5+CSS+JavaScript庆祝中华人民共和国的国庆日。

先看用css3画五星红旗效果：

用css3画五星红旗源码如下：

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS画五星红旗</title><style>.flag{width: 300px;height: 200px;background-color: red;position: relative;}body {display: flex;height: 100vh; /* 页面高度 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */margin: 0; /* 去掉默认边距 */}.star{margin: 0 0;position: absolute;display: block;/* color: red; */width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid yellow;/* */border-left: 100px solid transparent;transform: rotate(35deg);left: 20px;}.star:before {border-bottom: 80px solid yellow;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';transform: rotate(-35deg);}.star:after{content: '';margin: 0;position: absolute;display: block;/* color: red; */width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid yellow;/* */border-left: 100px solid transparent;transform: rotate(-70deg);left: -107px;top: 5px;}.big{/* position: absolute; */transform: scale(.3) rotate(35deg);top: 10px;left: -50px;z-index: 3;}.little1{position: absolute;transform: scale(.1) rotate(-60deg);top: -15px;left: 5px;}.little2{position: absolute;transform: scale(.1) rotate(-45deg);top: 5px;left: 30px;}.little3{position: absolute;transform: scale(.1) rotate(35deg);top: 33px;left: 30px;}.little4{position: absolute;transform: scale(.1) rotate(60deg);top: 50px;left: 5px;}</style></head> 
<body><div class="flag"><div class="star big"></div><div class="star little1"></div><div class="star little2"></div><div class="star little3"></div><div class="star little4"></div></div>
</body>
</html>

下面添加烟花效果烘托国庆气氛

先看国庆烟花效果：

国庆烟花源码如下：

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>国庆烟花气氛</title><style>body {display: flex;height: 100vh; /* 页面高度 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */margin: 0; /* 去掉默认边距 */position: relative;overflow: hidden;background-color: #000; /* 背景设为黑色，模拟夜空 */}.flag {width: 300px;height: 200px;background-color: red;position: relative;z-index: 1;}.star {margin: 0 0;position: absolute;display: block;width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid yellow;border-left: 100px solid transparent;transform: rotate(35deg);left: 20px;}.star:before {border-bottom: 80px solid yellow;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';transform: rotate(-35deg);}.star:after {content: '';margin: 0;position: absolute;display: block;width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid yellow;border-left: 100px solid transparent;transform: rotate(-70deg);left: -107px;top: 5px;}.big {transform: scale(.3) rotate(35deg);top: 10px;left: -50px;z-index: 3;}.little1 {position: absolute;transform: scale(.1) rotate(-60deg);top: -15px;left: 5px;}.little2 {position: absolute;transform: scale(.1) rotate(-45deg);top: 5px;left: 30px;}.little3 {position: absolute;transform: scale(.1) rotate(35deg);top: 33px;left: 30px;}.little4 {position: absolute;transform: scale(.1) rotate(60deg);top: 50px;left: 5px;}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; /* 使canvas不会阻止点击事件 */}</style>
</head>
<body><canvas id="fireworks"></canvas><div class="flag"><div class="star big"></div><div class="star little1"></div><div class="star little2"></div><div class="star little3"></div><div class="star little4"></div></div><script>const canvas = document.getElementById('fireworks');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;function randomColor() {return `hsl(${Math.random() * 360}, 100%, 50%)`;}function Firework(x, y) {this.x = x;this.y = y;this.size = Math.random() * 10 + 5;this.speed = Math.random() * 6 + 2;this.angle = Math.random() * Math.PI * 2;this.color = randomColor();this.exploded = false;this.particles = [];this.update = function () {if (!this.exploded) {this.y -= this.speed;// 限制烟花的最大高度if (this.y < canvas.height * 0.2) { // 高度限制this.exploded = true;this.createParticles();}if (this.size > 0) {this.size -= 0.1;} else {this.exploded = true;this.createParticles();}} else {this.particles.forEach(p => p.update());}};this.createParticles = function () {const particleCount = Math.random() * 100 + 50;for (let i = 0; i < particleCount; i++) {this.particles.push(new Particle(this.x, this.y, this.color));}};this.draw = function () {if (!this.exploded) {if (this.size > 0) { // 仅在大小为正时绘制。ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}} else {this.particles.forEach(p => p.draw());}};}function Particle(x, y, color) {this.x = x;this.y = y;// 将颜色分解为RGB，以便后续使用this.color = color.match(/\d+/g).map(Number);this.size = Math.random() * 3 + 2;this.speed = Math.random() * 3 + 1;this.angle = Math.random() * Math.PI * 2;this.alpha = 1;this.update = function () {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;this.alpha -= 0.02;};this.draw = function () {ctx.fillStyle = `rgba(${this.color.join(",")}, ${this.alpha})`;if (this.alpha > 0) { // 仅当透明度为正时绘制。ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}};}const fireworks = [];function createFirework() {const firework = new Firework(Math.random() * canvas.width, canvas.height);fireworks.push(firework);}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);fireworks.forEach((firework, index) => {firework.update();firework.draw();if (firework.exploded && firework.particles.length === 0) {fireworks.splice(index, 1);}});requestAnimationFrame(animate);}for (let i = 0; i < 5; i++) {createFirework();}animate();setInterval(createFirework, 1000);</script>
</body>
</html>

相关文章：

用HTML5+CSS+JavaScript庆祝国庆

用HTML5CSSJavaScript庆祝国庆 中华人民共和国的国庆日是每年的10月1日。 1949年10月1日&#xff0c;中华人民共和国中央人民政府成立&#xff0c;在首都北京天安门广场举行了开国大典&#xff0c;中央人民政府主席毛泽东庄严宣告中华人民共和国成立&#xff0c;并亲手升起了…...

编程日记 2024/10/6 5:05:11

《OpenCV 计算机视觉》—— 视频背景建模

文章目录 一、背景建模的目的二、背景建模的方法三、背景建模的步骤四、注意事项五、代码实现 一、背景建模的目的 视频背景建模的主要目的是从视频序列中提取出静态背景&#xff0c;以便将动态的前景对象与静态的背景进行分离。这有助于进一步分析和处理视频内容&#xff0c;…...

编程日记 2024/10/6 5:04:10

【Mac】和【安卓手机】 通过有线方式实现投屏

Mac 和 安卓手机 实现投屏&#xff08;有线&#xff09; 1.下载HomeBrew /bin/bash -c "$(curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/install/master/install.sh)"2.安装Scrcpy brew install scrcpy3.安装adb brew install android-platfor…...

编程日记 2024/10/6 5:02:08

GitHub flow工作流

github.com github.com使用自己版本的标记语法&#xff0c;它提供了一组额外的有用的 特性&#xff0c;其中许多特性使处理github.com上的内容更加容易。 用户名-提及 键入一个符号&#xff0c;后跟一个用户名&#xff0c;将通知此人前来查看评论。 这叫做“提及”&#x…...

编程日记 2024/10/6 4:59:05

【Qt笔记】QFrame控件详解

目录 引言 一、QFrame的基本特性 二、QFrame的常用方法 2.1 边框形状&#xff08;Frame Shape&#xff09; 2.2 阴影样式&#xff08;Frame Shadow&#xff09; 2.3 线条宽度&#xff08;Line Width&#xff09; 2.4 样式表(styleSheet) 三、QFrame的应用场景 四、应用…...

编程日记 2024/10/6 4:57:04

【二十八】【QT开发应用】模拟WPS Tab

WidgetBase 类旨在实现窗口的可调整大小功能&#xff0c;使用户能够手动改变窗口的尺寸。该类通过以下机制实现窗口缩放效果&#xff1a;当鼠标移动至窗口边缘时&#xff0c;鼠标指针样式会动态改变以指示可调整大小的方向。用户在边缘区域按下鼠标左键后&#xff0c;可以通过拖…...

编程日记 2024/10/6 4:55:02

PyQt入门指南四 事件处理机制详解

1. 事件处理概述 在PyQt中&#xff0c;事件处理是实现交互性的关键部分。事件可以是用户的操作&#xff08;如点击按钮、键盘输入&#xff09;&#xff0c;也可以是系统的通知&#xff08;如窗口最小化、定时器超时&#xff09;。PyQt使用信号&#xff08;Signals&#xff09;…...

编程日记 2024/10/6 4:54:00

【24最新亲试】ubuntu下载go最新版本

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了工具配置的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于Ubuntu 升级 golang 版本完美步骤进行的&#xff0c;每个知识点的修…...

编程日记 2024/10/6 4:51:58

InnoDB 事务模型

文章目录 InnoDB 事务模型事务ACID特性事务隔离级别 事务操作事务并发问题事务数据读写类型Consistent Nonlocking Reads 快照读Locking Reads 加锁读 MVCC 并发控制实现原理InnoDB 隐藏列Read ViewUndo log实现过程 MVCC与隔离级别MVCC和辅助索引 幻读可重复读MVCC会出现幻读的…...

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

STM32 Hal库SDIO在FATFS使用下的函数调用关系

STM32 Hal库SDIO在FATFS使用下的函数调用关系 本文并不将FATFS的相关接口操作&#xff0c;而是将HAL在使用FATFS通过SDIO外设管理SD卡时&#xff0c;内部函数的调用逻辑&#xff0c;有助于当我们使用CUBEMX生成FATFS读取SD卡的代码时无法运行时Debug。本文也会说明一些可能出现…...

编程日记 2024/10/6 4:48:55

网络基础知识笔记(五)接口管理

接口管理 1. 物理层的功能 物理层要解决的三个问题&#xff1a; 1-信号&#xff1a; 模拟信号&#xff0c;数字信号(一组有规律变化的电流脉冲) 2-传输介质&#xff1a; 同轴电缆&#xff0c;双绞线(电信号,电口)&#xff0c;光纤(光信号,光口)&#xff0c;(空气)电磁波(WiFi,…...

编程日记 2024/10/6 4:47:54

网站集群批量管理-密钥认证与Ansible模块

一、集群批量管理-密钥认证 1、概述 管理更加轻松&#xff1a;两个节点,通过密钥形式进行访问,不需要输入密码,仅支持单向. 服务要求(应用场景)&#xff1a; 一些服务在使用前要求我们做秘钥认证.手动写批量管理脚本. 名字: 密钥认证,免密码登录,双机互信. 2、原理 税钥对…...

编程日记 2024/10/6 4:46:53

TCP四次挥手过程详解

TCP四次挥手全过程 有几点需要澄清&#xff1a; 1.首先&#xff0c;tcp四次挥手只有主动和被动方之分&#xff0c;没有客户端和服务端的概念 2.其次&#xff0c;发送报文段是tcp协议栈的行为&#xff0c;用户态调用close会陷入到内核态 3.再者&#xff0c;图中的情况前提是双…...

编程日记 2024/10/6 4:45:50

在 MySQL 中处理和优化大型报告查询经验分享

在 MySQL 数据库的使用过程中&#xff0c;我们经常会遇到需要生成大型报告的情况&#xff0c;这些查询可能涉及大量的数据和复杂的计算&#xff0c;对数据库的性能提出了很高的要求。 一、问题背景 大型报告查询通常具有以下特点&#xff1a; 数据量大&#xff1a;涉及大量的…...

编程日记 2024/10/6 4:44:48

数字图像处理：空间域滤波

1.数字图像处理&#xff1a;空间域滤波 1.1 滤波器核&#xff08;相关核&#xff09;与卷积 图像上的邻域计算 线性空间滤波的原理 滤波器核&#xff08;相关核&#xff09;是如何得到的&#xff1f; 空间域的卷积 卷积&#xff1a;滤波器核与window中的对应值相乘后所有…...

编程日记 2024/10/6 4:42:46

【easypoi 一对多导入解决方案】

easypoi 一对多导入解决方案 1.需求2.复现问题2.1校验时获取不到一对多中多的完整数据2.2控制台报错 Cannot add merged region B5:B7 to sheet because it overlaps with an existing merged region (B3:B5). 3.如何解决第二个问题处理&#xff1a; Cannot add merged region …...

编程日记 2024/10/6 4:41:44

DDOS攻击会对网站服务器造成哪些影响？

DDOS攻击作为日常生活正比较常见的网络攻击类型&#xff0c;可以让多台计算机在同一时间内遭受到攻击&#xff0c;下面小编就带领大家一起来了解一下DDOS攻击会对网站服务器造成哪些影响吧&#xff01; 首先DDOS攻击在进行攻击的过程中&#xff0c;可以对源IP地址进行伪造&…...

编程日记 2024/10/6 4:40:43

linux基础指令的认识

在正式学习linux前&#xff0c;可以简单认识一下linux与win的区别 win&#xff1a;是图形界面&#xff0c;用户操作更简单&#xff1b;在刚开始win也是黑屏终端 指令操作&#xff0c;图形界面就是历史发展的结果。Linux&#xff1a;也存在图形界面比如desktop OS&#xff1b;但…...

编程日记 2024/10/6 4:39:42

html5 + css3（下）

目录 CSS基础基础认识体验cssCSS引入方式 基础选择器选择器-标签选择器-类选择器-id选择器-通配符 字体和文本样式1.1 字体大小1.2 字体粗细1.3 字体样式&#xff08;是否倾斜&#xff09;1.4 常见字体系列&#xff08;了解&#xff09;1.5 字体系列拓展-层叠性font复合属性文本…...

编程日记 2024/10/6 4:36:39

828华为云征文｜部署个人文档管理系统 Docspell

828华为云征文&#xff5c;部署个人文档管理系统 Docspell 一、Flexus云服务器X实例介绍二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置2.4 Docker 环境搭建 三、Flexus云服务器X实例部署 Docspell3.1 Docspell 介绍3.2 Docspell 部署3.3 Docspell 使用…...

编程日记 2024/10/6 4:33:35

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/8/10 20:17:44

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/8/22 3:50:38

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/8/25 9:25:03

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/8/18 3:52:02

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/8/6 5:14:18

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/8/22 3:33:46

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/8/22 4:52:43

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/8/26 22:50:22

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/8/25 11:18:43

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/8/23 20:05:22