前端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创建并切换…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件： 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
企业大模型服务合规指南：深度解析备案与登记制度
伴随AI技术的爆炸式发展，尤其是大模型（LLM）在各行各业的深度应用和整合，企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者，还是积极拥抱AI转型的传统企业，在面向公众…...