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

【JS+H5+CSS实现烟花特效】

news 2026/3/26 12:00:59

话不多说直接上代码

注意:背景图路径是picture/star.jpg，自己在同级目录先创键picture目录再下载一张图片命名为star.jpg

HTML:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fireworks Animation</title><link rel="stylesheet" href="style.css" /></head><body><canvas id="fireworksCanvas"></canvas><script src="script.js"></script></body>
</html>

JS:

    // 获取canvas元素const canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');// 设置canvas宽度和高度为窗口宽度和高度canvas.width = window.innerWidth;canvas.height = window.innerHeight;let fireworks = [];// 创建烟花类class Firework {constructor() {this.x = Math.random() * canvas.width; // 随机生成烟花的起始x坐标this.y = canvas.height; // 烟花起始y坐标为画布底部this.radius = 2; // 烟花半径this.speed = 7; // 烟花上升速度this.color = 'white'; // 烟花颜色this.exploded = false; // 烟花是否已经爆炸this.particles = []; // 烟花爆炸后的粒子数组this.explosionHeight = Math.random() * (canvas.height * 0.4) + (canvas.height * 0.1); // 生成随机的爆炸高度this.initialAlpha = 1; // 初始透明度this.currentAlpha = this.initialAlpha; // 当前透明度}update() {if (!this.exploded) {this.y -= this.speed; // 烟花向上运动// 逐渐减少烟花的透明度this.currentAlpha -= 0.005;if (this.currentAlpha < 0) {this.currentAlpha = 0;}if (this.y <= this.explosionHeight) {this.explode();}} else {this.particles.forEach((particle, index) => {particle.update(); // 更新粒子的运动状态if (particle.alpha <= 0) {this.particles.splice(index, 1);}});}}draw() {ctx.beginPath(); // 开始绘制路径ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // 绘制一个以(x, y)为中心，半径为radius的圆ctx.fillStyle = this.color; // 设置填充颜色为烟花的颜色ctx.globalAlpha = this.currentAlpha; // 使用当前透明度ctx.fill(); // 填充圆ctx.closePath(); // 结束绘制路径if (this.exploded) {this.particles.forEach(particle => {particle.draw(); // 绘制每个粒子});}}explode() {this.exploded = true; // 设置烟花为已经爆炸状态for (let i = 0; i < 100; i++) {let particle = new Particle(this.x, this.y); // 创建一个新的粒子，位置为烟花的位置this.particles.push(particle); // 将新创建的粒子添加到烟花的粒子数组中}}}// 创建粒子类class Particle {constructor(x, y) { // 粒子类的构造函数，接收x和y坐标作为参数this.x = x; // 设置粒子的x坐标this.y = y; // 设置粒子的y坐标this.radius = 2; // 设置粒子的半径this.speedX = Math.random() * 5 - 2; // 随机生成粒子在x轴上的速度this.speedY = Math.random() * 5 - 2; // 随机生成粒子在y轴上的速度this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机生成粒子的颜色this.alpha = 1.2; // 设置粒子的透明度为1.2this.fade = Math.random() * 0.02 + 0.01; // 随机生成粒子透明度的减少速度}update() { // 更新粒子的位置和透明度this.x += this.speedX; // 更新粒子的x坐标this.y += this.speedY; // 更新粒子的y坐标this.alpha -= this.fade; // 减少粒子的透明度}draw() { // 绘制粒子ctx.beginPath(); // 开始绘制路径ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // 绘制一个以(x, y)为中心，半径为radius的圆ctx.fillStyle = this.color; // 设置填充颜色为粒子的颜色ctx.globalAlpha = this.alpha; // 设置全局透明度为粒子的透明度ctx.fill(); // 填充圆ctx.closePath(); // 结束绘制路径}}function animate() { // 动画函数，更新画布内容并绘制烟花和粒子ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 设置画布背景颜色及透明度ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充矩形覆盖画布fireworks.forEach((firework, index) => { // 遍历烟花数组firework.update(); // 更新烟花的位置和状态firework.draw(); // 绘制烟花及其粒子if (firework.exploded && firework.particles.length === 0) { // 如果烟花已经爆炸且没有粒子了fireworks.splice(index, 1); // 从烟花数组中移除该烟花}});requestAnimationFrame(animate); // 递归调用自身，实现连续动画效果}function init() { // 初始化函数setInterval(() => { // 每隔2秒执行一次let firework = new Firework(); // 创建一个新的烟花对象fireworks.push(firework); // 将新创建的烟花对象添加到烟花数组中}, 100);//每次循环的时间不能太长animate(); // 调用动画函数开始动画}init();

CSS:

body {margin: 0;padding: 0;overflow: hidden;background: url('picture/star.jpg') no-repeat center center fixed;background-size: cover;
}
canvas {display: block;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.5; /* 设置画布的透明度为0.5 */
}

代码可以直接用。设计思路如下：
1.设计了烟花类，粒子类
2.烟花从上升开始，直到爆炸，爆炸点创建100个粒子对象，粒子用来模拟烟花爆炸后散开的状态
3.烟花和粒子分别拥有初始透明度，经过随机的透明度衰减，达到完全透明，来模拟烟花和粒子的消失

相关文章：

【JS+H5+CSS实现烟花特效】

话不多说直接上代码 注意:背景图路径是picture/star.jpg&#xff0c;自己在同级目录先创键picture目录再下载一张图片命名为star.jpg HTML: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"vi…...

编程日记 2024/7/11 5:52:15

uniapp小程序使用webview 嵌套 vue 项目

uniapp小程序使用webview 嵌套 vue 项目 小程序中发送 <web-view :src"urlSrc" message"handleMessage"></web-view>export default {data() {return {urlSrc: "",};},onLoad(options) {// 我需要的参数比较多 所以比较臃肿// 获取…...

编程日记 2024/7/11 5:51:14

命令模式在金融业务中的应用及其框架实现

引言 命令模式（Command Pattern）是一种行为设计模式，它将一个请求封装为一个对象，从而使你可以用不同的请求对客户进行参数化，并且支持请求的排队和撤销操作。在金融业务中，命令模式可以用于实现交易请求、撤销操作等功能。本文将介绍命令模式在金融业务中的使用，并探讨…...

编程日记 2024/7/11 5:50:13

WordPress的性能优化有哪些方法？

WordPress的性能优化方法主要包括以下几个方面&#xff1a; 1. 使用缓存插件&#xff1a;缓存插件可以降低服务器负载&#xff0c;提高网站加载速度。常用的缓存插件有WP Rocket、WP Fastest Cache和Cache Enabler等。 2. 代码压缩和整合&#xff1a;通过压缩JavaScript、CSS…...

编程日记 2024/7/11 5:49:12

【Python基础】代码如何打包成exe可执行文件

本文收录于 《一起学Python趣味编程》专栏&#xff0c;从零基础开始&#xff0c;分享一些Python编程知识&#xff0c;欢迎关注&#xff0c;谢谢&#xff01; 文章目录 一、前言二、安装PyInstaller三、使用PyInstaller打包四、验证打包是否成功五、总结 一、前言 本文介绍如何…...

编程日记 2024/7/11 5:48:11

Golang | Leetcode Golang题解之第227题基本计算器II

题目&#xff1a; 题解&#xff1a; func calculate(s string) (ans int) {stack : []int{}preSign : num : 0for i, ch : range s {isDigit : 0 < ch && ch < 9if isDigit {num num*10 int(ch-0)}if !isDigit && ch ! || i len(s)-1 {switch preS…...

编程日记 2024/7/11 5:47:10

云端美味：iCloud中食谱与餐饮计划的智能存储方案

云端美味&#xff1a;iCloud中食谱与餐饮计划的智能存储方案 在数字化生活管理中&#xff0c;我们的食谱和餐饮计划是日常饮食健康与乐趣的重要部分。iCloud提供了一个无缝的解决方案&#xff0c;让我们可以在所有设备上存储、同步和访问这些珍贵的信息。本文将详细介绍如何在…...

编程日记 2024/7/11 5:45:09

leetcode:1332. 删除回文子序列（python3解法）

难度&#xff1a;简单 给你一个字符串 s&#xff0c;它仅由字母 a 和 b 组成。每一次删除操作都可以从 s 中删除一个回文 子序列。 返回删除给定字符串中所有字符&#xff08;字符串为空&#xff09;的最小删除次数。 「子序列」定义&#xff1a;如果一个字符串可以通过删除原字…...

编程日记 2024/7/11 5:44:08

智慧交通的神经中枢：Transformer模型在智能交通系统中的应用

智慧交通的神经中枢&#xff1a;Transformer模型在智能交通系统中的应用 随着城市化进程的加快&#xff0c;交通拥堵、事故频发、环境污染等问题日益严重。智能交通系统&#xff08;ITS&#xff09;作为解决这些问题的关键技术之一&#xff0c;受到了广泛关注。Transformer模型…...

编程日记 2024/7/11 5:42:04

PCIe驱动开发（1）— 开发环境搭建

PCIe驱动开发&#xff08;1&#xff09;— 开发环境搭建 一、前言 二、Ubuntu安装 参考: VMware下Ubuntu18.04虚拟机的安装 三、QEMU安装 参考文章&#xff1a;QEMU搭建X86_64 Ubuntu虚拟系统环境 四、安装Ubuntu 下载地址&#xff1a;https://old-releases.ubuntu.com…...

编程日记 2024/7/11 5:41:03

YOLOv10改进 | Conv篇 | CVPR2024最新DynamicConv替换下采样（解决低FLOPs陷阱）

一、本文介绍 本文给大家带来的改进机制是CVPR2024的最新改进机制DynamicConv其是CVPR2024的最新改进机制&#xff0c;这个论文中介绍了一个名为ParameterNet的新型设计原则&#xff0c;它旨在在大规模视觉预训练模型中增加参数数量&#xff0c;同时尽量不增加浮点运算&#x…...

编程日记 2024/7/11 5:39:01

变革设计领域：Transformer模型在智能辅助设计中的革命性应用

变革设计领域&#xff1a;Transformer模型在智能辅助设计中的革命性应用 在人工智能技术的推动下&#xff0c;智能辅助设计&#xff08;Intelligent Assisted Design, IAD&#xff09;正逐渐成为现实。Transformer模型&#xff0c;以其卓越的处理序列数据的能力&#xff0c;为…...

编程日记 2024/7/11 5:38:00

Spring——配置说明

1. 别名 别名&#xff1a;如果添加了别名&#xff0c;也可以使用别名获取这个对象 <alias name"user" alias"user2"/> 2. Bean的配置 id&#xff1a;bean 的唯一标识符&#xff0c;也就是相当于我们学的对象名class&#xff1a;bean 对象所对应的…...

编程日记 2024/7/11 5:37:00

禁用华为小米？微软中国免费送iPhone15

微软中国将禁用华为和小米手机&#xff0c;要求员工必须使用iPhone。如果还没有iPhone&#xff0c;公司直接免费送你全新的iPhone 15&#xff01; 、 这几天在微软热度最高的话题就是这个免费发iPhone&#xff0c;很多员工&#xff0c;收到公司的通知。因为&#xff0c;登录公司…...

编程日记 2024/7/11 5:35:59

nginx初理解

没有ngix时&#xff0c;有两台服务器&#xff0c;供访问 1. 现在有两台服务器上同样的路径下都放了一个&#xff0c; 都能通过ip加端口访问到页面 后端项目 &#xff08;查看tomcat中的配置中的 server.xml&#xff0c;能找到项目路径&#xff09; tomacat 也都有 两个…...

编程日记 2024/7/11 5:34:58

FreeCAD源码分析：属性系统

按照面向对象设计(Object-Oriented Design, OOD)的信条&#xff0c;OOD大体上包括两方面的内涵&#xff1a;一方面&#xff0c;需要将业务数据抽象成(树状/层状)数据对象&#xff0c;这就是所谓的数据对象模型(Data Object Model)&#xff1b;另一方面就是职责的分摊与聚合&…...

编程日记 2024/7/11 5:33:56

C++入门 模仿mysql控制台输出表格

一、 说明 控制台输出表格&#xff0c;自适应宽度 二、 源码 #include <iostream> #include <map> #include <string> #include <vector>using namespace std;void printTable(vector<vector<string>> *pTableData) {int row pTableDa…...

编程日记 2024/7/11 5:31:55

SpringBoot新手快速入门系列教程五：基于JPA的一个Mysql简单读写例子

现在我们来做一个简单的读写Mysql的项目 1&#xff0c;先新建一个项目&#xff0c;我们叫它“HelloJPA”并且添加依赖 2&#xff0c;引入以下依赖&#xff1a; Spring Boot DevTools (可选&#xff0c;但推荐&#xff0c;用于开发时热部署)Lombok&#xff08;可选&#xff0c…...

编程日记 2024/7/11 5:30:54

开源大势所趋

一、开源项目的发展趋势 技术栈多样化与专业化&#xff1a;随着技术的不断进步&#xff0c;开源项目涵盖了从云计算、大数据、人工智能到区块链、物联网等各个领域&#xff0c;技术栈日益丰富和专业化。这种趋势使得开发者能够根据自己的需求选择最适合的技术工具&#xff0c;促…...

编程日记 2024/7/11 5:28:51

智能无人机飞行控制系统：基于STM32的设计与实现（内附资料）

摘要 智能无人机的飞行控制系统是确保无人机安全、高效运行的核心。本文将探讨基于STM32微控制器的智能无人机飞行控制系统的设计与实现&#xff0c;包括系统架构、关键组件选择、控制算法开发以及代码实现。 1. 引言 智能无人机在军事侦察、物流配送、环境监测等多个领域展…...

编程日记 2024/7/11 5:27:50

论文格式不再是噩梦：Paperxie 智能排版，4000 + 高校模版一键适配知网 / 维普

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/format/typesettinghttps://www.paperxie.cn/format/typesetting 又到毕业季&#xff0c;多少本科生在论文内容写完后&#xff0c;倒在了格式排版这最后一关&#xff1f;字体…...

编程新知 2026/3/26 10:17:15

U校园脚本背后的技术揭秘：油猴Tampermonkey如何实现自动答题与挂时长？

油猴脚本技术解析&#xff1a;从DOM操作到自动化实践 打开浏览器开发者工具时&#xff0c;你是否注意过那些在页面加载时闪烁的DOM元素&#xff1f;正是这些看似简单的节点操作&#xff0c;构成了现代Web自动化的基础。Tampermonkey&#xff08;油猴&#xff09;作为最流行的用…...

编程新知 2026/3/26 9:51:05

5分钟搞定OpenClaw飞书接入：Qwen3.5-9B对话机器人配置

5分钟搞定OpenClaw飞书接入&#xff1a;Qwen3.5-9B对话机器人配置 1. 为什么选择OpenClaw飞书Qwen3.5-9B组合 上周我在整理团队周报时&#xff0c;突然意识到一个痛点&#xff1a;每次都要反复切换浏览器、文档和聊天工具&#xff0c;手动复制粘贴信息。这种机械操作不仅浪费…...

编程新知 2026/3/26 9:46:59

Cisco Packet Tracer实战：3分钟搞定Web/DNS/DHCP服务器联调（附拓扑图）

Cisco Packet Tracer实战&#xff1a;Web/DNS/DHCP服务器高效联调指南 在当今网络技术快速发展的背景下&#xff0c;掌握基础网络服务的配置与联调已成为网络工程师的必备技能。Cisco Packet Tracer作为一款强大的网络仿真工具&#xff0c;为学习者提供了安全、便捷的实验环境&…...

编程新知 2026/3/26 9:42:58

23种设计模式 - 建造者模式（Builder）

建造者模式&#xff08;Builder&#xff09;—— 一步一步拼出来 大白话解释 你去点外卖套餐&#xff0c;可以自己一步步选&#xff1a; 选主食&#xff08;汉堡 / 鸡腿&#xff09;选饮料&#xff08;可乐 / 橙汁&#xff09;选大小&#xff08;中杯 / 大杯&#xff09;要不要…...

编程新知 2026/3/26 8:48:36

OpenClaw多端同步：GLM-4.7-Flash任务跨设备执行方案

OpenClaw多端同步&#xff1a;GLM-4.7-Flash任务跨设备执行方案 1. 为什么需要多端同步&#xff1f; 去年冬天的一次出差经历让我深刻体会到设备割裂的痛苦。当时我正在用OpenClaw处理一个数据分析项目&#xff0c;笔记本上运行着GLM-4.7-Flash模型生成的自动化脚本。突然接到…...

编程新知 2026/3/26 8:02:27

Python AI用例生成效率实战手册（企业级自动化工作流全拆解）

第一章&#xff1a;Python AI用例生成效率的核心价值与企业级定位在AI工程化落地加速的当下&#xff0c;Python凭借其丰富的生态&#xff08;如LangChain、LlamaIndex、transformers、scikit-learn&#xff09;和低门槛的可编程性&#xff0c;已成为企业构建AI用例生成流水线的…...

编程新知 2026/3/26 7:56:26

用Python处理SEED-VIG脑电数据：从PERCLOS标签到EEG特征提取的完整流程

用Python处理SEED-VIG脑电数据&#xff1a;从PERCLOS标签到EEG特征提取的完整流程 在神经工程和驾驶安全研究中&#xff0c;SEED-VIG数据集因其高质量的多模态生理信号采集而备受关注。这个包含EEG、EOG和眼动追踪数据的资源&#xff0c;为疲劳检测算法开发提供了宝贵素材。本文…...

编程新知 2026/3/26 6:31:44

Qwen3-32B开源模型企业应用：Clawdbot平台审计日志、调用统计、权限分级

Qwen3-32B开源模型企业应用&#xff1a;Clawdbot平台审计日志、调用统计、权限分级 1. 引言&#xff1a;当企业级AI平台遇上开源大模型 想象一下&#xff0c;你的团队正在内部使用一个强大的AI助手&#xff0c;它能回答技术问题、编写代码、甚至帮你分析数据。但问题来了&…...

编程新知 2026/3/26 5:03:48

Endnote参考文献序号对齐的终极解决方案

1. 为什么参考文献序号会对不齐&#xff1f; 很多科研工作者在使用Endnote插入参考文献时都遇到过这样的尴尬&#xff1a;当文献序号从个位数增长到十位数时&#xff08;比如从[9]变成[10]&#xff09;&#xff0c;原本整齐排列的参考文献列表突然变得参差不齐。这个问题看似简…...

编程新知 2026/3/26 4:17:26