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：控制器类，可…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
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…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...