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：控制器类，可…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...