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

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

news 2026/5/21 4:24:53

效果展示

在这里插入图片描述

源代码

<!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

CANN/asc-devkit原子减法操作

asc_atomic_sub 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode…...

编程新知 2026/5/21 4:20:35

STM32驱动PS2手柄控制智能小车实战（避坑指南+遥控代码解析）

STM32驱动PS2手柄控制智能小车实战&#xff08;避坑指南遥控代码解析&#xff09; 在创客社区和嵌入式开发领域&#xff0c;智能小车一直是验证硬件控制逻辑的理想平台。而将游戏手柄作为控制终端&#xff0c;不仅能让项目更具趣味性&#xff0c;还能深入理解工业级输入设备与嵌…...

编程新知 2026/5/21 3:54:48

TVBOX最新电视直播软件tv版下载与安装教程

如何安装最新版电视直播软件tv版TVBOX&#xff1f;先讲清楚&#xff1a;TVBox 是开源播放器&#xff0c;本身不带影视资源&#xff0c;装好后必须配置 “数据源 / 接口” 才能用。下面分「下载 → 安装 → 配置 → 常见问题」一步步来。&#xff08;如果不会配置&#xff0c;可…...

编程新知 2026/5/21 3:20:22

别再被ZIP伪加密骗了！一个Python脚本自动检测修复，解放你的双手

用Python自动化破解ZIP伪加密&#xff1a;从原理到实战工具开发 每次在CTF比赛中遇到ZIP伪加密题目&#xff0c;你是否也厌倦了手动用十六进制编辑器逐个修改字节的繁琐过程&#xff1f;作为参加过数十场CTF比赛的老兵&#xff0c;我深刻理解这种重复劳动的低效与痛苦。本文将带…...

编程新知 2026/5/21 2:53:34

效率翻倍！OrCAD Capture CIS创建复杂元器件库的实战技巧：LM358与多Part器件管理

效率翻倍&#xff01;OrCAD Capture CIS创建复杂元器件库的实战技巧&#xff1a;LM358与多Part器件管理 在电子设计领域&#xff0c;元器件库的管理水平直接影响设计效率。许多工程师在使用OrCAD Capture CIS时&#xff0c;面对LM358这类多Part器件或更复杂的异构元件时&#x…...

编程新知 2026/5/21 2:44:40

避坑指南：ESP32-C3蓝牙开发中GATT读写事件的常见误解与正确姿势

ESP32-C3蓝牙GATT开发实战&#xff1a;破解读写事件的核心逻辑与高效数据流设计 当你在ESP32-C3上实现蓝牙温度传感器时&#xff0c;是否遇到过这样的困境&#xff1a;手机APP读取到的温度值总是比实际值延迟了2秒&#xff1f;或者明明在代码里更新了数据&#xff0c;客户端却始…...

编程新知 2026/5/21 1:16:35

别再只用JSON了！聊聊Qt里QDataStream的二进制序列化优势与避坑指南

二进制序列化新选择&#xff1a;Qt中QDataStream的高效实践与深度解析 在Qt开发者的工具箱里&#xff0c;JSON和XML常被视为数据交换的默认选择&#xff0c;但当面对高性能、紧凑存储或跨版本兼容性需求时&#xff0c;二进制序列化方案往往能带来意想不到的优势。QDataStream作…...

编程新知 2026/5/21 0:06:19

W5500 TCP客户端开发避坑指南：从寄存器配置到稳定通信的5个关键步骤

W5500 TCP客户端开发避坑指南&#xff1a;从寄存器配置到稳定通信的5个关键步骤 在嵌入式网络通信领域&#xff0c;W5500作为一款硬件集成TCP/IP协议栈的以太网控制器&#xff0c;因其易用性和稳定性备受开发者青睐。然而&#xff0c;当项目从实验室demo转向实际部署时&#xf…...

编程新知 2026/5/20 23:53:41

2026 年 AI 编程工具横评：Claude Code、Cursor、Copilot、Codex 谁才是真正的生产力？

爆款标题备选我把五个 AI 编程工具全装了一遍&#xff0c;只有一个让我想付费Claude Code vs Cursor vs Copilot&#xff1a;2026 开发者选型实战指南Copilot 的垄断结束了——2026 AI 编程工具真实横评花了一周用 AI 编程 Agent 写项目&#xff0c;最后留下了这一个AI 编程工具…...

编程新知 2026/5/20 22:12:59

RISC-V双芯架构在智慧燃气报警器中的系统级设计与工程实践

1. 项目概述&#xff1a;当RISC-V芯遇上智慧燃气最近在深圳的智慧燃气发展论坛上&#xff0c;我注意到一家叫微五科技的芯片设计公司&#xff0c;他们带来了一套挺有意思的解决方案。核心不是别的&#xff0c;正是当下在嵌入式领域越来越火的RISC-V架构。他们这次重点展示的&am…...

编程新知 2026/5/20 21:44:15