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

用HTML5+CSS+JavaScript庆祝国庆

news 2026/4/2 13:26:49

用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

实战指南：用LLNet深度学习模型提升夜间监控画质（附Python代码）

实战指南&#xff1a;用LLNet深度学习模型提升夜间监控画质&#xff08;附Python代码&#xff09; 夜间监控画质提升一直是安防和无人机航拍领域的核心挑战。当光线不足时&#xff0c;传统ISP&#xff08;图像信号处理器&#xff09;往往难以平衡亮度增强与噪声抑制&#xff0c…...

编程新知 2026/4/2 13:14:27

Vue项目发版后用户总看到旧页面？3种缓存清理方案实测（含Vue2/Vue3对比）

Vue项目发版后用户总看到旧页面&#xff1f;3种缓存清理方案实测&#xff08;含Vue2/Vue3对比&#xff09; 每次发版后&#xff0c;总有用户反馈"页面没变化"&#xff0c;这可能是浏览器缓存在作祟。作为前端开发者&#xff0c;我们常遇到这类问题——明明服务端已更…...

编程新知 2026/4/2 13:02:16

GKD规则分享功能：导出与导入自动化配置的实用技巧

GKD规则分享功能&#xff1a;导出与导入自动化配置的实用技巧 GKD作为一款强大的Android自动化工具&#xff0c;其规则分享功能让用户能够轻松导出和导入精心配置的自动化规则。无论是备份个人设置还是分享给朋友&#xff0c;这个功能都能大幅提升使用效率&#xff01;&#x…...

编程新知 2026/4/2 12:35:59

千问GEO生成式引擎优化技术方案

千问GEO生成式引擎优化技术方案 技术支持&#xff1a;拓世网络技术开发工作室 针对通义千问&#xff08;Qwen&#xff09;的生成式引擎优化&#xff08;GEO&#xff09;并非简单的关键词堆砌&#xff0c;而是一场关于“认知抢占”的技术战役。在2026年的当下&#xff0c;随着通…...

编程新知 2026/4/2 12:09:28

Tomcat安全防护指南：如何用TomcatScanPro检测CVE-2017-12615和AJP文件包含漏洞

Tomcat安全防护实战&#xff1a;从漏洞检测到加固的全链路解决方案 在企业级Java应用部署中&#xff0c;Tomcat作为最流行的Web服务器之一&#xff0c;其安全性直接关系到业务系统的稳定运行。本文将深入剖析两个高危漏洞&#xff08;CVE-2017-12615和AJP文件包含&#xff09;的…...

编程新知 2026/4/2 11:57:24

泉盛UV-K5/K6固件自定义：解锁专业对讲机功能的终极指南

泉盛UV-K5/K6固件自定义&#xff1a;解锁专业对讲机功能的终极指南 【免费下载链接】uv-k5-firmware-custom 全功能泉盛UV-K5/K6固件 Quansheng UV-K5/K6 Firmware 项目地址: https://gitcode.com/gh_mirrors/uvk5f/uv-k5-firmware-custom 你是否曾想过&#xff0c;一台…...

编程新知 2026/4/2 11:51:13

nginx——方向代理和负载均衡

目录 1.1 Nginx概述 1.1.1 企业青睐 Nginx 的核心原因 1.1.2 Nginx的作用 1.3 反向代理和负载均衡 1.4 注 1.4.1 代理百度并使用 18090 端口 1.1 Nginx概述 1.1.1 企业青睐 Nginx 的核心原因 Nginx 由俄罗斯开发者打造&#xff0c;具有超高稳定性&#xff08;资源占用极低…...

编程新知 2026/4/2 11:18:32

Claude Code平替方案实战：如何用第三方API（如DeepSeek、Kimi）低成本玩转AI编程助手

Claude Code平替方案实战&#xff1a;如何用第三方API低成本玩转AI编程助手 在AI编程助手领域&#xff0c;Claude Code凭借其出色的代码理解和生成能力赢得了不少开发者的青睐。然而&#xff0c;官方API的高昂成本和访问限制让许多预算有限的个人开发者和小团队望而却步。本文将…...

编程新知 2026/4/2 10:21:59

从114G输出文件反推：OpenHarmony编译后，out目录里到底装了啥？如何优化存储空间？

从114G输出文件反推&#xff1a;OpenHarmony编译后&#xff0c;out目录里到底装了啥&#xff1f;如何优化存储空间&#xff1f; 当你第一次完成OpenHarmony的完整编译&#xff0c;看到out目录膨胀到51G甚至更大时&#xff0c;难免会感到震惊。更令人头疼的是&#xff0c;随着开…...

编程新知 2026/4/2 10:19:58

Phi-4-mini-reasoning助力Web前端开发：智能UI组件设计与代码生成

Phi-4-mini-reasoning助力Web前端开发&#xff1a;智能UI组件设计与代码生成 1. 引言&#xff1a;当AI遇见前端开发 想象一下这样的场景&#xff1a;产品经理拿着一份复杂的需求文档找到你&#xff0c;描述了一个需要实时数据更新、多状态切换、动态交互的仪表盘界面。传统开…...

编程新知 2026/4/2 10:09:51