前端JS特效第53集：带声音的烟花模拟绽放特效插件
带声音的烟花模拟绽放特效插件，先来看看效果：
部分核心的代码如下(全部代码在文章末尾)：
<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>Firework Simulator v2</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="apple-touch-icon-precomposed" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./src/style.css"></head>
<body>
<!-- partial:index.partial.html -->
<!-- SVG Spritesheet -->
<div style="height: 0; width: 0; position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></symbol><symbol id="icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></symbol><symbol id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></symbol><symbol id="icon-settings" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></symbol><symbol id="icon-sound-on" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></symbol><symbol id="icon-sound-off" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></symbol></svg>
</div><!-- App -->
<div class="container"><div class="loading-init"><div class="loading-init__header">Loading</div><div class="loading-init__status">Assembling Shells</div></div><div class="stage-container remove"><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">Settings</div><div class="menu__subheader">For more info, click any label.</div><form><div class="form-option form-option--select"><label class="shell-type-label">Shell Type</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">Shell Size</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">Quality</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">Sky Lighting</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">Scale</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">Auto Fire</label><input class="auto-launch" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">Finale Mode</label><input class="finale-mode" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">Hide Controls</label><input class="hide-controls" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">Fullscreen</label><input class="fullscreen" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">Open Shutter</label><input class="long-exposure" type="checkbox" /></div></form><div class="credits">Passionately built by <a href="https://cmiller.tech/" target="_blank">Caleb Miller</a>.</div></div></div></div><div class="help-modal"><div class="help-modal__overlay"></div><div class="help-modal__dialog"><div class="help-modal__header"></div><div class="help-modal__body"></div><button type="button" class="help-modal__close-btn">Close</button></div></div>
</div>
<!-- partial --><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script>
<script src="./src/script.js"></script></body>
</html>
全部代码：带声音的烟花模拟绽放特效插件
相关文章：
前端JS特效第53集：带声音的烟花模拟绽放特效插件
带声音的烟花模拟绽放特效插件，先来看看效果： 部分核心的代码如下(全部代码在文章末尾)： <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>Firework Simulator v2&…...
好展位，抢先订！2025浙江（玉环）机械展
2025第18届浙江（玉环）机械工业展览会 时间地点：2025年4月25-28日 玉环会展中心 近年来，随着玉环工业经济的蓬勃发展，汽摩配件、阀门水暖五金产业、铜加工、眼镜配件、金属加工生产等行业，如同贪婪的巨人&…...
Java面试八股之Spring如何解决循环依赖
Spring如何解决循环依赖 在Spring框架中，循环依赖问题通常发生在两个或多个Bean相互依赖的情况下。Spring为了解决循环依赖问题，采用了不同的策略，这些策略主要取决于Bean的作用域以及依赖注入的方式。下面是一些关键点： 单例Be…...
如何为 SQL Server 设置强密码以增强安全性？
为 SQL Server 设置强密码是增强数据库安全性的重要步骤。以下是一些关键步骤和最佳实践： 1. 使用复杂密码 长度：密码应至少为 12 个字符。字符类型：包括大写字母、小写字母、数字和特殊字符（如 !#$%^&*()）。避免…...
C语言实现三子棋
通过一段时间的学习，我们已经能够较为熟练地使用分支语句，循环语句，创建函数，创建数组，创建随机数等。之前我们做过一个扫雷游戏，今天让我们再尝试创作一个三子棋游戏吧~ 一、三子棋游戏的思路 三子棋的游…...
昇思25天学习打卡营第XX天|RNN实现情感分类
希望代码能维持开源维护状态hhh，要是再文件整理下就更好了，现在好乱，不能好fork tutorials/application/source_zh_cn/nlp/sentiment_analysis.ipynb MindSpore/docs - Gitee.com...
linux深度学习环境配置（cuda,pytorch）
显卡驱动 首先查看linux服务器是否存在显卡驱动，可以输入以下命令 nvidia-smi如果没有直接显示下面的画面 则进行下面的步骤： ubuntu-drivers devices sudo ubuntu-drivers autoinstall上述步骤的意思是直接在线安装 然后重启linux服务器 reboot发现…...
SpringBoot教程（十九） | SpringBoot集成Slf4j日志门面
SpringBoot教程（十九） | SpringBoot集成Slf4j日志门面 一、概述二、前言三、引入依赖 (不需要额外引入了)四、自定义Logback的配置文件（一般都需配置）情况一：不配置任何关于logback的配置文件情况二：配置关…...
科普文：深入理解ElasticSearch体系结构
概叙 Elasticsearch是什么？ Elasticsearch（简称ES）是一个分布式、可扩展、实时的搜索与数据分析引擎。ES不仅仅只是全文搜索，还支持结构化搜索、数据分析、复杂的语言处理、地理位置和对象间关联关系等。 官网地址：…...
极限学习机（ELM）预测模型及其Python和MATLAB实现
### 一、背景 在机器学习和数据挖掘领域，预测模型旨在从过往数据中学习规律，以便对未知数据进行预测。随着数据量的激增和计算能力的提升，各种算法不断涌现。其中，极限学习机（Extreme Learning Machine, ELM࿰…...
基于Python的哔哩哔哩国产动画排行数据分析系统
需要本项目的可以私信博主，提供完整的部署、讲解、文档、代码服务 随着经济社会的快速发展，中国影视产业迎来了蓬勃发展的契机，其中动漫产业发展尤为突出。中国拥有古老而又璀璨的文明，仅仅从中提取一部分就足以催生出大量精彩的…...
Java导出Excel给每一列设置不同样式示例
Excel导出这里不讲，方法很多，原生的POI可以参照 Java原生POI实现的Excel导入导出（简单易懂） 这里只说怎么给Excel每一列设置不同的样式，比如下面这样的 直接上代码 Overridepublic void exportTemplate(HttpServletRe…...
2.1、matlab绘图汇总(图例、标题、坐标轴、线条格式、颜色和散点格式设置)
1、前言 在 MATLAB 中进行绘图是一种非常常见且实用的操作，可以用来可视化数据、结果展示、分析趋势等。通过 MATLAB 的绘图功能，用户可以创建各种类型的图形，包括线图、散点图、柱状图、曲线图等，以及三维图形、动画等复杂的可视化效果。 在绘图之前，通常需要先准备好要…...
Datawhale AI夏令营 AI+逻辑推理 Task2总结
Datawhale AI夏令营 AI逻辑推理 Task2总结 一、大语言模型解题方案介绍 1.1 大模型推理介绍 推理是建立在训练完成的基础上，将训练好的模型应用于新的、未见过的数据，模型利用先前学到的规律进行预测、分类和生成新内容，使得AI在实际应…...
linux常使用的命令
关机命令 shutdown halt poweroff reboot grep 选项 参数 -l 显示所有包含关键字的文件名 -n 在匹配之前加上行号 -c 只显示匹配的行数 -v 显示不匹配的行 管道符 “|” 左边的输出作为右边的输入 例如：我们找个文件包含abc 但是不含有def的文件 grep …...
Ubuntu系统U盘安装与虚拟机安装
一、Ubuntu系统U盘安装 准备工作 下载Ubuntu镜像文件：从Ubuntu官方网站下载最新的LTS（长期支持）版本镜像文件（ISO），以确保系统的稳定性和长期支持。准备U盘：选择一个容量至少为8GB的U盘，并确保U盘中的数据已备份，因为接下来的操作会格式化U盘。制作启动U盘： Windows…...
FastDDS中的线程梳理
目录 线程预览 我们承担ROS，FastDDS，C，cmake等技术的项目开发和专业指导和培训，有10年相关工作经验，质量有保证，如有需要请私信联系。 线程预览 NameTypeCardinality线程名DescriptionEventGeneral每个Dom…...
Signac包-1.Analyzing PBMC scATAC-seq
–https://stuartlab.org/signac/articles/pbmc_vignette 好的，开始学习scATAC-seq的数据是怎么玩的了，先跑完Signac的教程，边跑边思考怎么跟自己的课题相结合。 留意更多内容，欢迎关注微信公众号：组学之心 数据和R…...
使用指定版本python创建虚拟机环境
安装python3.9 对于 Ubuntu/Debian，可以使用以下命令： sudo apt update sudo apt install python3.9 对于 CentOS，可能需要先启用 EPEL 存储库，然后使用以下命令： sudo yum install https://dl.fedoraproject.org/…...
【git】git常用命令提交规范
Git 是程序员工作中不可或缺的版本控制工具，以下是一些优化后的常用 Git 命令列表，旨在帮助你更高效地使用 Git 进行版本控制。 基础操作 拉取代码 git clone xxx.git创建分支 git branch dev切换分支 git checkout dev # 或者 git switch dev创建并切换…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
uniapp 小程序 学习（一）
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 ：开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现 如下 bug 解…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时，需要使用外部低速晶振...