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

2025新春烟花代码（二）HTML5实现孔明灯和烟花效果

news 2026/4/5 4:31:29

效果展示

在这里插入图片描述

源代码

<!DOCTYPE html>
<html lang="en">
<script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
</script>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炸弹爆炸和烟花效果</title><style>/* 夜空背景 */body, html {margin: 0;padding: 0;overflow: hidden;background: #000;}/* 星空背景 */.starry-background {position: absolute;width: 100%;height: 100%;background: radial-gradient(circle at bottom, #001025, #000000);z-index: -1;}.stars {position: absolute;width: 100%;height: 100%;background: url('https://i.imgur.com/3Zv2v1m.png') repeat;opacity: 0.5;animation: twinkle 5s infinite alternate;}@keyframes twinkle {from {opacity: 0.3;}to {opacity: 0.7;}}/* 孔明灯样式 */.lantern {position: absolute;width: 30px;height: 45px;background: radial-gradient(circle, #ff8c00, #ff4500);border-radius: 10px;box-shadow: 0 0 10px rgba(255, 140, 0, 0.8);animation: floatUp infinite linear;}@keyframes floatUp {0% {transform: translateY(100vh); /* 从页面底部开始 */opacity: 0;}10% {opacity: 1;}100% {transform: translateY(-200%); /* 上升到页面外 */opacity: 0;}}/* 新春快乐文本样式 */.new-year-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: 'Arial', sans-serif;font-size: 100px; /* 增大字体 */font-weight: bold;color: #ff8c00;text-shadow: 2px 2px 10px rgba(255, 140, 0, 0.8);opacity: 0; /* 初始透明 */transition: opacity 3s ease-out; /* 设置渐变效果 */}</style>
</head>
<body><!-- 星空背景 --><div class="starry-background"><div class="stars"></div></div><!-- 新春快乐文本 --><div class="new-year-text">2025 新春快乐！</div><!-- 孔明灯容器 --><div class="lantern-container"></div><!-- 烟花效果画布 --><canvas id="fireworks"></canvas><script>// 初始化孔明灯const lanternContainer = document.querySelector('.lantern-container');// 创建一个生成孔明灯的函数，逐渐增加let lanternCount = 0;function generateLantern() {const lantern = document.createElement('div');lantern.classList.add('lantern');lantern.style.left = Math.random() * 100 + '%';lantern.style.animationDuration = `${10 + Math.random() * 5}s`;lanternContainer.appendChild(lantern);lanternCount++;if (lanternCount >= 50) clearInterval(lanternInterval);  // 限制最大数量}// 设置一个间隔，逐渐添加孔明灯const lanternInterval = setInterval(generateLantern, 200);  // 每200ms增加一个孔明灯// 烟花效果const canvas = document.getElementById('fireworks');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;let particles = [];function createFirework(x, y) {const particleCount = 150;for (let i = 0; i < particleCount; i++) {particles.push(new Particle(x, y));}}class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 3 + 1;this.speedX = Math.random() * 6 - 3;this.speedY = Math.random() * 6 - 3;this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;this.alpha = 1;}update() {this.x += this.speedX;this.y += this.speedY;this.alpha -= 0.01;}draw() {ctx.globalAlpha = this.alpha;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);particles = particles.filter(particle => particle.alpha > 0);particles.forEach(particle => {particle.update();particle.draw();});requestAnimationFrame(animate);}function autoFireworks() {setInterval(() => {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height / 2;createFirework(x, y);}, 300);}animate();autoFireworks();// 绘制炸弹函数（没有导火线）let bombScale = 1; // 炸弹的初始大小let bombY = window.innerHeight / 2; // 将炸弹固定在屏幕中间let bombX = window.innerWidth / 2;let bombTimer = 0;let isExploding = false; // 是否处于爆炸状态let bombActive = true; // 判断炸弹是否仍然存在function drawBomb(x, y, scale) {ctx.save();ctx.beginPath();ctx.arc(x, y, 30 * scale, 0, Math.PI * 2, false); // 绘制炸弹的圆形，随着scale变化ctx.fillStyle = '#ffcc00'; // 黄色ctx.fill();ctx.shadowBlur = 15;ctx.shadowColor = 'rgba(255, 204, 0, 0.8)'; // 添加阴影ctx.lineWidth = 4;ctx.strokeStyle = '#ff9900';ctx.stroke();ctx.restore();}// 动画函数：炸弹上升到中间并开始呼吸效果function animateBomb() {if (bombActive) {// 在前200帧，炸弹开始呼吸效果（大小不断变化）if (bombTimer < 200) {bombScale = 1 + Math.sin(bombTimer / 30) * 0.2; // 使炸弹有呼吸的效果} else if (bombTimer >= 200 && !isExploding) {// 经过一段时间后，炸弹开始爆炸isExploding = true;setTimeout(() => {document.querySelector('.new-year-text').style.opacity = 1;  // 显示文本createFirework(bombX, bombY); // 同时创建烟花bombActive = false; // 爆炸后隐藏炸弹}, 500); // 延迟0.5秒后爆炸}drawBomb(bombX, bombY, bombScale);}bombTimer++;requestAnimationFrame(animateBomb); // 循环调用动画}// 页面加载5秒后才开始炸弹动画setTimeout(animateBomb, 5000); // 5秒后开始炸弹动画</script>
</body>
</html>

相关文章：

2025新春烟花代码（二）HTML5实现孔明灯和烟花效果

效果展示 源代码 <!DOCTYPE html> <html lang"en"> <script>var _hmt _hmt || [];(function () {var hm document.createElement("script");hm.src "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";var …...

编程日记 2025/1/11 7:03:34

apollo内置eureka dashboard授权登录

要确保访问Eureka Server时要求输入账户和密码&#xff0c;需要确保以下几点&#xff1a; 确保 eurekaSecurityEnabled 配置为 true&#xff1a;这个配置项控制是否启用Eureka的安全认证。如果它被设置为 false&#xff0c;即使配置了用户名和密码&#xff0c;也不会启用安全认…...

编程日记 2025/1/11 7:01:30

后台管理系统全屏功能实现

后台管理系统中有一个比较常见的功能就是全屏显示&#xff0c;以方便用最大的屏幕查看系统&#xff0c;特别是在小屏模式下。 对于 screenfull 而言&#xff0c;浏览器本身已经提供了对用的 API&#xff0c;点击这里即可查看&#xff0c;这个 API 中&#xff0c;主要提供了两个…...

编程日记 2025/1/11 7:00:27

风电叶片市场竞争激烈：开启绿色能源新篇章的巨大潜力

一、引言 面对全球气候变化的严峻挑战&#xff0c;可再生能源的开发与利用已成为各国共识。风电&#xff0c;作为技术最成熟、最具规模化开发条件的可再生能源之一&#xff0c;正以前所未有的速度发展。而风电叶片&#xff0c;作为风电机组的核心部件&#xff0c;其技术创新与…...

编程日记 2025/1/11 6:59:24

【Unity3D日常开发】Unity3D中适用WEBGL打开Window文件对话框打开/上传文件

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群&#xff1a;398291828小红书小破站 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 Unity3D发布的WEBGL程序是不支持直接的I/O操…...

编程日记 2025/1/11 6:53:17

C# 或 .NetCore 如何使用 NPOI 导出图片到 Excel 文件

今天在本文中&#xff0c;我们将尝试使用NPOI库将图像插入到 Excel 文件的特定位置。请将以下逻辑添加到您的写作方法中&#xff0c;在 Excel 文件中添加图像&#xff08;JPEG、PNG&#xff09;,我已经有一个示例 jpeg 文件 - Read-write-excel-npoi.jpg &#xff0c;我们将尝试…...

编程日记 2025/1/11 6:52:16

Lambda expressions in C++ (C++ 中的 lambda 表达式)

Lambda expressions in C {C 中的 lambda 表达式} 1. Parts of a lambda expression (Lambda 表达式的各个部分)1.2. Parameter list (Optional) References lambda /ˈlm.də/&#xff1a;the 11th letter of the Greek alphabet (希腊语字母表的第 11 个字母)https://learn.m…...

编程日记 2025/1/11 6:51:15

【Rust自学】11.4. 用should_panic检查恐慌

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.4.1. 验证错误处理的情况 测试函数出了验证代码的返回值是否正确&#xff0c;还需要验证代码是否如预期的去处理了发生错误的情况。比…...

编程日记 2025/1/11 6:47:09

高斯函数Gaussian绘制matlab

高斯 约翰卡尔弗里德里希高斯&#xff0c;&#xff08;德语&#xff1a;Johann Carl Friedrich Gau&#xff0c;英语&#xff1a;Gauss&#xff0c;拉丁语&#xff1a;Carolus Fridericus Gauss&#xff09;1777年4月30日–1855年2月23日&#xff0c;德国著名数学家、物理学家…...

编程日记 2025/1/11 6:46:08

获取客户端真实IP地址

当处理来自客户端的请求时&#xff0c;尤其是在存在代理服务器的情况下&#xff0c;可能需要考虑多种HTTP请求头&#xff0c;以尽可能准确地获取用户的真实IP地址。以下是考虑了X-Forwarded-For、Proxy-Client-IP、WL-Proxy-Client-IP、HTTP_CLIENT_IP、HTTP_X_FORWARDED_FOR的…...

编程日记 2025/1/11 6:45:07

Kotlin学习(一)

1. Kotlin 作用域函数 如果同学们已经在项目中用过 Kotlin 语言&#xff0c;那么一定见过 let 函数&#xff01;因为每当 Kotlin 检测到某个对象可能为空时&#xff0c;会自动帮我们修改为用 let 函数实现&#xff1a;user.name?.let{ textView.text it }。这里的 let 函数就…...

编程日记 2025/1/11 6:44:04

鸿蒙UI开发——日历选择器

1、概 述 在项目开发中&#xff0c;我们时常会用到日历选择器&#xff0c;效果如下&#xff1a; ArkUI已经为我们提供了组件&#xff0c;我们可以直接使用&#xff0c;下面针对日历组件做简单介绍。 2、CalendarPickerDialog 接口定义如下&#xff1a; // 定义日历选择器弹…...

编程日记 2025/1/11 6:43:03

2025-1-9 QT 使用 QXlsx库 读取 .xlsx 文件 —— 导入 QXlsx库以及读取 .xlsx 的源码 实践出真知，你我共勉

文章目录 1. 导入QXlsx库2. 使用 QXlsx库 读取 .xlsx 文件小结 网上有很多教程&#xff0c;但太费劲了&#xff0c;这里有个非常简便的好方法&#xff0c;分享给大家。 1. 导入QXlsx库 转载链接 &#xff1a;https://github.com/QtExcel/QXlsx/blob/master/HowToSetProject.md…...

编程日记 2025/1/11 6:42:02

React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

【2024最新版】React18 核心源码分析教程&#xff08;全61集&#xff09; Element对象与Fiber对象 在 React 中&#xff0c;Element 对象 和 Fiber 对象 是核心概念&#xff0c;用于实现 React 的高效渲染和更新机制。以下是它们的详细解读&#xff1a; 1. Element 对象 定…...

编程日记 2025/1/11 6:40:01

利用Python实现Union-Find算法

Union-Find&#xff08;又称 并查集&#xff09;是一种高效解决 动态连通性问题 的算法。它主要提供两种操作&#xff1a; Union(x, y)&#xff1a;将元素 x 和 y 连接。Find(x)&#xff1a;找到元素 x 所属的集合的标识符&#xff08;通常是集合的根节点&#xff09;。 常用…...

编程日记 2025/1/11 6:36:58

【LeetCode: 912. 排序数组 + 归并排序】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

编程日记 2025/1/11 6:35:57

AI时代来了，我们不再需要IDE了

大家好&#xff0c;我是编程乐趣。 最近在思考一个问题&#xff0c;那就是AI这么强大。 未来有没有可能&#xff0c;我们就不需要不需要开发工具了&#xff0c;只需一个浏览器就可以开发软件了。 一、AI带来的变化 1、代码生成与补全 AI工具如GitHub Copilot等能够根据代码…...

编程日记 2025/1/11 6:32:53

PL/SQL语言的网络编程

PL/SQL语言的网络编程 引言 在信息化迅速发展的今天&#xff0c;网络编程作为现代软件开发的重要组成部分&#xff0c;受到了广泛关注。而在数据库管理系统中&#xff0c;Oracle 提供了 PL/SQL&#xff08;Procedural Language/Structured Query Language&#xff09;&#x…...

编程日记 2025/1/11 6:31:51

vue video重复视频 设置 srcObject 视频流不占用资源 减少资源浪费

// 直接设置srcObject减少获取视频流&#xff1a;通过 captureStream() 方法从下方视频元素获取视频流。 // 设置 srcObject&#xff1a;将获取到的视频流设置为上方视频的 srcObject 减少资源浪费 // 获取到需要复制到的dom元素 const firstVideoElement proxy.$refs.firs…...

编程日记 2025/1/11 6:30:50

JavaFx 21 项目Markdown 预览、编辑、新建、文件树、删除、重命名

项目文件结构 项目的源代码和资源文件存放在以下路径： 源代码： src/main/java/com/kong/markdown/ 包含多个 Java 文件，主要实现了应用的功能： App.java：主类，可能包含应用的启动逻辑。FileService.java：可能与文件操作相关的服务类。MainController.java：控制器类，可…...

编程日记 2025/1/11 6:29:49

OpenClaw办公自动化：gemma-3-12b-it处理Excel与邮件的完整流程

OpenClaw办公自动化&#xff1a;gemma-3-12b-it处理Excel与邮件的完整流程 1. 为什么选择OpenClaw处理办公自动化&#xff1f; 上个月我需要每周手动处理几十份客户反馈表&#xff0c;从Excel数据清洗到邮件发送至少耗费3小时。当我尝试用Python脚本自动化时&#xff0c;发现…...

编程新知 2026/4/5 3:53:54

Windows下OpenClaw安装指南：一键对接Qwen3-4B-Thinking-2507-GPT-5-Codex-Distill-GGUF模型

Windows下OpenClaw安装指南&#xff1a;一键对接Qwen3-4B-Thinking-2507-GPT-5-Codex-Distill-GGUF模型 1. 为什么选择WindowsOpenClaw组合 去年我在帮一个创业团队搭建内部自动化工具时&#xff0c;第一次接触到OpenClaw。当时他们需要一套能自动处理客户反馈、生成日报的系…...

编程新知 2026/4/5 2:14:15

5个实战案例解析：如何用VLA模型让机器人听懂人话并执行任务（附开源项目推荐）

5个实战案例解析&#xff1a;如何用VLA模型让机器人听懂人话并执行任务&#xff08;附开源项目推荐&#xff09; 当机器人能像人类助手一样理解"把茶几上的遥控器拿过来"这样的日常指令时&#xff0c;具身智能才真正开始改变我们的生活。视觉-语言-动作&#xff08;V…...

编程新知 2026/4/5 1:33:28

openclaw本地安装包一键安装 集成400+大模型+微信、企业微信、钉钉、飞书图形界面参数，无需复杂配置

前言&#xff1a;作为主打本地化的轻量级 AI 智能体&#xff0c;OpenClaw 凭借本地运行无隐私泄露、零代码一键部署、免费开源无捆绑的核心优势&#xff0c;成为办公党和技术爱好者的效率神器。继 v2.4.1 版本收获大量好评后&#xff0c;OpenClaw v2.60 正式发布&#xff0c;本…...

编程新知 2026/4/5 0:36:20

SH_MLCD_J：Sharp HR-TFT内存液晶驱动库详解

1. 项目概述SH_MLCD_J 是一款专为驱动 Sharp 公司 HR-TFT 系列单色内存液晶显示屏&#xff08;Monochrome Memory LCD&#xff09;设计的嵌入式底层图形库。该库被广泛应用于秋月电子等国内元器件分销商所售的 SHARP 原厂模组&#xff0c;典型型号包括 LS013B7DH03、LS027B7DH0…...

编程新知 2026/4/5 0:34:19

EthernetClientSecure深度指南：ESP32嵌入式TLS安全通信实战

1. EthernetClientSecure 库深度解析&#xff1a;面向嵌入式工程师的 TLS/SSL 安全以太网通信实践指南EthernetClientSecure 是一款专为 Arduino/ESP32 平台设计的轻量级、高可靠性安全以太网客户端库。它并非简单封装&#xff0c;而是通过精密的分层架构&#xff0c;在资源受限…...

编程新知 2026/4/5 0:22:00

你的Spring Boot项目安全吗？快速排查并修复Fastjson2历史版本（＜=2.0.26）的隐藏风险

Spring Boot项目安全自查&#xff1a;Fastjson2历史版本&#xff08;≤2.0.26&#xff09;风险排查与修复指南 最近在帮几个客户做代码审计时&#xff0c;发现不少Spring Boot项目还在使用Fastjson2的老版本。说实话&#xff0c;这个问题比想象中普遍——很多团队甚至不知道自…...

编程新知 2026/4/4 22:48:52

2026最权威的五大降AI率网站推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 使AIGC检测率降低的关键之处在于把机器生成的规律性特征给消除&#xff0c;首先&#xff0c;…...

编程新知 2026/4/4 22:36:43

北京交通大学校内邮箱配置指南：Windows与Mac系统自带邮件应用全攻略

1. 为什么需要配置校内邮箱&#xff1f; 作为北京交通大学的师生&#xff0c;校内邮箱是重要的通讯工具。无论是接收学校通知、提交作业&#xff0c;还是与导师同学沟通&#xff0c;都需要用到这个官方邮箱。很多同学第一次使用时&#xff0c;可能会被各种服务器设置搞得一头雾…...

编程新知 2026/4/4 22:07:53

终极指南：优化uid-generator内存管理的7个实用技巧，显著降低GC压力

终极指南&#xff1a;优化uid-generator内存管理的7个实用技巧&#xff0c;显著降低GC压力 【免费下载链接】uid-generator UniqueID generator 项目地址: https://gitcode.com/gh_mirrors/ui/uid-generator 在高并发系统中&#xff0c;uid-generator作为一款高效的唯一…...

编程新知 2026/4/4 19:30:46