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 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 …...
apollo内置eureka dashboard授权登录
要确保访问Eureka Server时要求输入账户和密码，需要确保以下几点： 确保 eurekaSecurityEnabled 配置为 true：这个配置项控制是否启用Eureka的安全认证。如果它被设置为 false，即使配置了用户名和密码，也不会启用安全认…...
后台管理系统全屏功能实现
后台管理系统中有一个比较常见的功能就是全屏显示，以方便用最大的屏幕查看系统，特别是在小屏模式下。 对于 screenfull 而言，浏览器本身已经提供了对用的 API，点击这里即可查看，这个 API 中，主要提供了两个…...
风电叶片市场竞争激烈：开启绿色能源新篇章的巨大潜力
一、引言 面对全球气候变化的严峻挑战，可再生能源的开发与利用已成为各国共识。风电，作为技术最成熟、最具规模化开发条件的可再生能源之一，正以前所未有的速度发展。而风电叶片，作为风电机组的核心部件，其技术创新与…...
【Unity3D日常开发】Unity3D中适用WEBGL打开Window文件对话框打开/上传文件
推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群：398291828小红书小破站 大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 一、前言 Unity3D发布的WEBGL程序是不支持直接的I/O操…...
C# 或 .NetCore 如何使用 NPOI 导出图片到 Excel 文件
今天在本文中，我们将尝试使用NPOI库将图像插入到 Excel 文件的特定位置。请将以下逻辑添加到您的写作方法中，在 Excel 文件中添加图像（JPEG、PNG）,我已经有一个示例 jpeg 文件 - Read-write-excel-npoi.jpg ，我们将尝试…...
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ə/：the 11th letter of the Greek alphabet (希腊语字母表的第 11 个字母)https://learn.m…...
【Rust自学】11.4. 用should_panic检查恐慌
喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 11.4.1. 验证错误处理的情况 测试函数出了验证代码的返回值是否正确，还需要验证代码是否如预期的去处理了发生错误的情况。比…...
高斯函数Gaussian绘制matlab
高斯 约翰卡尔弗里德里希高斯，（德语：Johann Carl Friedrich Gau，英语：Gauss，拉丁语：Carolus Fridericus Gauss）1777年4月30日–1855年2月23日，德国著名数学家、物理学家…...
获取客户端真实IP地址
当处理来自客户端的请求时，尤其是在存在代理服务器的情况下，可能需要考虑多种HTTP请求头，以尽可能准确地获取用户的真实IP地址。以下是考虑了X-Forwarded-For、Proxy-Client-IP、WL-Proxy-Client-IP、HTTP_CLIENT_IP、HTTP_X_FORWARDED_FOR的…...
)
Kotlin学习(一)
1. Kotlin 作用域函数 如果同学们已经在项目中用过 Kotlin 语言，那么一定见过 let 函数！因为每当 Kotlin 检测到某个对象可能为空时，会自动帮我们修改为用 let 函数实现：user.name?.let{ textView.text it }。这里的 let 函数就…...
鸿蒙UI开发——日历选择器
1、概 述 在项目开发中，我们时常会用到日历选择器，效果如下： ArkUI已经为我们提供了组件，我们可以直接使用，下面针对日历组件做简单介绍。 2、CalendarPickerDialog 接口定义如下： // 定义日历选择器弹…...
2025-1-9 QT 使用 QXlsx库 读取 .xlsx 文件 —— 导入 QXlsx库以及读取 .xlsx 的源码 实践出真知，你我共勉
文章目录 1. 导入QXlsx库2. 使用 QXlsx库 读取 .xlsx 文件小结 网上有很多教程，但太费劲了，这里有个非常简便的好方法，分享给大家。 1. 导入QXlsx库 转载链接 ：https://github.com/QtExcel/QXlsx/blob/master/HowToSetProject.md…...
React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode
【2024最新版】React18 核心源码分析教程（全61集） Element对象与Fiber对象 在 React 中，Element 对象 和 Fiber 对象 是核心概念，用于实现 React 的高效渲染和更新机制。以下是它们的详细解读： 1. Element 对象 定…...
利用Python实现Union-Find算法
Union-Find（又称 并查集）是一种高效解决 动态连通性问题 的算法。它主要提供两种操作： Union(x, y)：将元素 x 和 y 连接。Find(x)：找到元素 x 所属的集合的标识符（通常是集合的根节点）。 常用…...
【LeetCode: 912. 排序数组 + 归并排序】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...
AI时代来了，我们不再需要IDE了
大家好，我是编程乐趣。 最近在思考一个问题，那就是AI这么强大。 未来有没有可能，我们就不需要不需要开发工具了，只需一个浏览器就可以开发软件了。 一、AI带来的变化 1、代码生成与补全 AI工具如GitHub Copilot等能够根据代码…...
PL/SQL语言的网络编程
PL/SQL语言的网络编程 引言 在信息化迅速发展的今天，网络编程作为现代软件开发的重要组成部分，受到了广泛关注。而在数据库管理系统中，Oracle 提供了 PL/SQL（Procedural Language/Structured Query Language）&#x…...
vue video重复视频 设置 srcObject 视频流不占用资源 减少资源浪费
// 直接设置srcObject减少获取视频流：通过 captureStream() 方法从下方视频元素获取视频流。 // 设置 srcObject：将获取到的视频流设置为上方视频的 srcObject 减少资源浪费 // 获取到需要复制到的dom元素 const firstVideoElement proxy.$refs.firs…...
JavaFx 21 项目Markdown 预览、编辑、新建、文件树、删除、重命名
项目文件结构 项目的源代码和资源文件存放在以下路径： 源代码： src/main/java/com/kong/markdown/ 包含多个 Java 文件，主要实现了应用的功能： App.java：主类，可能包含应用的启动逻辑。FileService.java：可能与文件操作相关的服务类。MainController.java：控制器类，可…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...