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

用html画一个烟花特效

news 2026/3/31 13:49:08 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>烟花特效</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css"><link rel="stylesheet" href="./style.css">
</head>
<body><!-- 文字部分 --><canvas></canvas><h1>202<span class="pen">4</span> 新年快乐😃</h1><!-- partial --><script src="./script.js"></script>
</body>
</html>

var ctx = document.querySelector('canvas').getContext('2d')
ctx.canvas.width = window.innerWidth
ctx.canvas.height = window.innerHeightvar sparks = []
var fireworks = []
var i = 20; while(i--) {fireworks.push(new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random()))
}render()
function render() {setTimeout(render, 1000/60)ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)for(var firework of fireworks) {if(firework.dead) continuefirework.move()firework.draw()}for(var spark of sparks) {if(spark.dead) continuespark.move()spark.draw()}if(Math.random() < 0.05) {fireworks.push(new Firework())}
}function Spark(x, y, color) {this.x = xthis.y = ythis.dir = Math.random() * (Math.PI*2)this.dead = falsethis.color = colorthis.speed = Math.random() * 3 + 3;this.walker = new Walker({ radius: 20, speed: 0.25 })this.gravity = 0.25this.dur = this.speed / 0.1this.move = function() {this.dur--if(this.dur < 0) this.dead = trueif(this.speed < 0) returnif(this.speed > 0) this.speed -= 0.1var walk = this.walker.step()this.x += Math.cos(this.dir + walk) * this.speedthis.y += Math.sin(this.dir + walk) * this.speedthis.y += this.gravitythis.gravity += 0.05}this.draw = function() {drawCircle(this.x, this.y, 3, this.color)}
}function Firework(x, y) {this.xmove = new Walker({radius: 10, speed: 0.5})this.x = x || Math.random() * ctx.canvas.widththis.y = y || ctx.canvas.heightthis.height = Math.random()*ctx.canvas.height/2this.dead = falsethis.color = randomColor()this.move = function() {this.x += this.xmove.step()if(this.y > this.height) this.y -= 1; else this.burst()}this.draw = function() {drawCircle(this.x, this.y, 1, this.color)}this.burst = function() {this.dead = truevar i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color))}
}function drawCircle(x, y, radius, color) {color = color || '#FFF'ctx.fillStyle = colorctx.fillRect(x-radius/2, y-radius/2, radius, radius)
}function randomColor(){return ['#93c47d','#a4c2f4','#b4a7d6','#c27ba0','#f6b26b', '#ffd966'][Math.floor(Math.random() * 6)];
}function Walker(options){this.step = function(){this.direction = Math.sign(this.target) * this.speedthis.value += this.directionthis.target? this.target -= this.direction: (this.value)? (this.wander) ? this.target = this.newTarget() : this.target = -this.value: this.target = this.newTarget()  return this.direction}this.newTarget = function() {return Math.round(Math.random()*(this.radius*2)-this.radius)}this.start = 0this.value = 0this.radius = options.radiusthis.target = this.newTarget()this.direction = Math.sign(this.target)this.wander = options.wanderthis.speed = options.speed || 1
}

html, body {padding: 0px;margin: 0px;background: #222;font-family: 'Karla', sans-serif;color: #fff;height: 100%;overflow: hidden;
}h1 {z-index: 1000;position: fixed;top: 50%;left: 50%;transform: translateX(-50%) translateY(-100%);font-size: 58px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;border: 2px solid #fff;padding: 7.5px 15px;background: rgba(0, 0, 0, 0.5);border-radius: 3px;overflow: hidden;
}span.pen {position: relative;display: inline-block;animation: drop 0.75s;
}canvas {width: 100%;height: 100%;
}@keyframes drop {0% {transform: translateY(-100px);opacity: 0;}90% {opacity: 1;transform: translateY(10px);}100% {transform: translateY(0px);}
}

相关文章：

用html画一个烟花特效

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>烟花特效</title><link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesom…...

编程日记 2024/3/28 17:15:04

SQL-CRUD-1

第一关任务描述 本关任务&#xff1a; 用insert给数据库添加数据 相关知识 有关系student(sno,sname,ssex,sage,sdept)&#xff0c;属性对应含义&#xff1a;学号&#xff0c;姓名&#xff0c;性别&#xff0c;所在系。现有的部分元组如下所示 insert 向数据库表插入数据的…...

编程日记 2024/3/28 17:13:02

linux 命令行下的计算器

!!! author 文章目录 1. echo 运算器, 推荐2. bc 计算器, 不推荐3. dc 计算器, 不推荐4. awk计算器. 推荐5. python. 推荐 1. echo 运算器, 推荐 限制是仅能在整数运算时使用 $ echo $((10534)) 70 优点,输入简洁, 支持运算表达式,支持16进制,10进制混合输入. 缺点,不支持浮点…...

编程日记 2024/3/28 17:12:00

Available platform plugins are: linuxfb, minimal, offscreen, vnc.

说明&#xff1a; buildroots根文件中已经移植好了QT的库&#xff0c;但是运行QT交叉编译之后的可执行文件报错&#xff1a; qt.qpa.plugin: Could not find the Qt platform plugin "eglfs" in "" This application failed to start because no Qt platf…...

编程日记 2024/3/28 17:09:57

C++中string容器的修改操作

目录 1.push_back() 尾插字符 2.append() 尾插字符串 3.operator 4.assign 覆盖 5.insert() 指定位置插入 6.erase() 删除 7.replace() 替换 8.swap() 交换 9.pop_back() 尾删 1.push_back() 尾插字符 void push_back (char c) string s("i miss gjj"); s…...

编程日记 2024/3/28 17:08:55

Elasticsearch：虚拟形象辅助和对话驱动的语音到 RAG 搜索

作者&#xff1a;来自 Elastic Sunile Manjee 搜索的演变 搜索已经从产生简单结果的简单文本查询发展成为容纳文本、图像、视频和问题等各种格式的复杂系统。 如今的搜索结果通过生成式人工智能、机器学习和交互式聊天功能得到增强&#xff0c;提供更丰富、更动态且与上下文相…...

编程日记 2024/3/28 17:02:48

测试开发工程师（QA）职业到底需要干些什么？part7:硬件测试工程师QA

概述 硬件测试工程师QA主要负责确保硬件产品在设计、制造和交付过程中的质量和性能。主要任务是进行测试、验证和分析硬件系统、组件和设备&#xff0c;以确保其符合规格和质量标准。下面是硬件测试工程师QA在其工作中常涉及的一些方面&#xff1a; 测试计划和策略&#xff1a…...

编程日记 2024/3/28 17:01:47

Python基础：标准库 -- pprint (数据美化输出)

1. pprint 库 官方文档 pprint --- 数据美化输出 — Python 3.12.2 文档 pprint — Data pretty printer — Python 3.12.2 documentation 2. 背景 处理JSON文件或复杂的嵌套数据时&#xff0c;使用普通的 print() 函数可能不足以有效地探索数据或调试应用程序。下面通过一…...

编程日记 2024/3/28 17:00:46

Visual Studio 小更新：改善变量的可见性

在 Visual Studio 2022 17.10 预览版 2 中&#xff0c;我们改善了一些小功能&#xff0c;例如&#xff1a;在调试版本中&#xff0c;变量窗口现已可以显示调用堆栈中任意帧的局部变量。 如需体验此功能&#xff0c;请直接安装最新预览版本&#xff0c;就可以知道是怎么一回事儿…...

编程日记 2024/3/28 16:57:42

C++自主点餐系统

一、 题目 设计一个自助点餐系统&#xff0c;方便顾客自己点餐&#xff0c;并提供对餐厅销售情况的统计和管理功能。 二、 业务流程图 三、 系统功能结构图 四、 类的设计 五、 程序代码与说明 头文件1. SystemMap.h #pragma once #ifndef SYSTEMMAP #define SYSTEMMAP #in…...

编程日记 2024/3/28 16:56:41

jconsole jvisualvm

jconsole 打开方式 命令行输入 jconsole双击想要连接的应用 界面展示 jvisualvm 打开方式 命令行输入 jvisualvm双击想要连接的应用 可以安装插件&#xff0c;比如 Visual GC 直观看到 GC 过程...

编程日记 2024/3/28 16:55:40

python vtkUnstructuredGrid 转 vtkAlgorithmOutput_

在VTK (Vtk.py)中&#xff0c;vtkUnstructuredGrid对象可以通过多种方式转换为vtkAlgorithmOutput_对象。这种转换通常在管道中使用&#xff0c;以将一个算法的输出传递给另一个算法作为其输入。 以下是一个简单的例子&#xff0c;展示如何将vtkUnstructuredGrid对象转换为 v…...

编程日记 2024/3/28 16:54:35

IS-IS路由

概览&#xff1a; Intermediate System-to-Intermediate System&#xff0c;中间系统到中间系统协议 IS-IS--IGP--链路状态协议--AD值&#xff1a;115 IS--中间系统&#xff08;路由器&#xff09; ES--终端系统&#xff08;PC&#xff09; 在早期IS-IS的开发并不是为了IP…...

编程日记 2024/3/28 16:53:33

打造新质生产力，亚信科技2024年如何行稳致远？

引言&#xff1a;不冒进、不激进&#xff0c;稳扎稳打&#xff0c; 一个行业一个行业地深度拓展。 【全球云观察 &#xff5c; 科技热点关注】 基于以往“一巩固、三发展”的多年业务战略&#xff0c;亚信科技正在落实向非通信行业、标准产品、软硬一体产品和国际市场的“四…...

编程日记 2024/3/28 16:52:32

开源博客项目Blog .NET Core源码学习（12：App.Application项目结构分析）

开源博客项目Blog的App.Application项目主要定义网站页面使用的数据类&#xff0c;同时定义各类数据的增删改查操作接口和实现类。App.Application项目未安装Nuget包&#xff0c;主要引用App.Core项目的类型。   App.Application项目的顶层文件夹如下图所示&#xff0c;下面逐…...

编程日记 2024/3/28 16:48:24

AES加密解密算法

一&#xff0c;AES算法概述 AES属于分组加密&#xff0c;算法明文长度固定为128位&#xff08;单位是比特bit&#xff0c;1bit就是1位&#xff0c;128位等于16字节&#xff09; 而密钥长度可以是128、192、256位 当密钥为128位时&#xff0c;需要循环10轮完成加密&#xff0…...

编程日记 2024/3/28 16:47:23

计算机网络（05）

计算机网络&#xff08;04&#xff09; 网络负载均衡 由多台服务器以对称的方式组成一个服务器集合每台服务器都具有等价的地位 , 可以单独对外提供服务而无须其他服务器的辅助均衡负载能够平均分配客户请求到服务器列阵&#xff0c;借此提供快速获取重要数据&#xff0c;解决…...

编程日记 2024/3/28 16:45:20

6、ChatGLM3-6B 部署实践

一、ChatGLM3-6B介绍与快速入门 ChatGLM3 是智谱AI和清华大学 KEG 实验室在2023年10月27日联合发布的新一代对话预训练模型。ChatGLM3-6B 是 ChatGLM3 系列中的开源模型&#xff0c;免费下载&#xff0c;免费的商业化使用。 该模型在保留了前两代模型对话流畅、部署门槛低等众多…...

编程日记 2024/3/28 16:43:18

python面试题（1~10）

1、列表&#xff08;list&#xff09;和元组&#xff08;tuple&#xff09;有什么区别&#xff1f; ①列表是不可变的&#xff0c;创建后可以对其进行修改。元组是不可变的&#xff0c;元组一旦创建&#xff0c;就不能对其进行修改。 ②列表表示的顺序&#xff0c;它们是有序…...

编程日记 2024/3/28 16:41:15

分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测

分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测 目录 分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测分类效果基本介绍模型描述程序设计参…...

编程日记 2024/3/28 16:37:12

沉浸式翻译扩展常见问题解决方案

沉浸式翻译扩展常见问题解决方案 【免费下载链接】immersive-translate 沉浸式双语网页翻译扩展 , 支持输入框翻译&#xff0c; 鼠标悬停翻译&#xff0c; PDF, Epub, 字幕文件, TXT 文件翻译 - Immersive Dual Web Page Translation Extension 项目地址: https://gitcode.c…...

编程新知 2026/3/31 13:28:54

颠覆传统游戏体验：Sunshine云游戏串流平台让你随时随地畅玩PC游戏

颠覆传统游戏体验&#xff1a;Sunshine云游戏串流平台让你随时随地畅玩PC游戏 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 你是否曾梦想过在旅途中用平板继续昨晚未完成的3A大作…...

编程新知 2026/3/31 12:17:39

告别付费IP！手把手教你用ZCU102 PS端DP接口点亮显示器（附参数调试心得）

解锁ZCU102 PS端DisplayPort潜力&#xff1a;零成本实现高效显示输出的实战指南 在嵌入式视觉系统开发中&#xff0c;显示输出往往是项目落地的最后一道关卡。当我在多个Zynq UltraScale MPSoC项目中反复遭遇HDMI IP核的授权困扰和PL端实现的复杂性后&#xff0c;意外发现PS端集…...

编程新知 2026/3/31 12:01:35

MiniCPM-o-4.5-nvidia-FlagOS部署运维：使用Docker Compose管理多服务依赖

MiniCPM-o-4.5-nvidia-FlagOS部署运维&#xff1a;使用Docker Compose管理多服务依赖 你是不是也遇到过这种情况&#xff1f;想部署一个AI模型&#xff0c;发现它依赖一堆东西&#xff1a;模型服务本身、数据库、缓存、可能还有别的辅助工具。一个个手动去装、去配置、去启动&…...

编程新知 2026/3/31 11:49:26

[特殊字符] Nano-Banana部署教程：Ubuntu/CentOS环境下的镜像拉取与启动

Nano-Banana部署教程&#xff1a;Ubuntu/CentOS环境下的镜像拉取与启动 1. 项目简介 Nano-Banana是一款专门为产品拆解和平铺展示风格设计的轻量级文本生成图像系统。这个项目的核心在于深度融合了Nano-Banana专属的Turbo LoRA微调权重&#xff0c;专门针对Knolling平铺、爆炸…...

编程新知 2026/3/31 11:21:11

5分钟快速上手：AsrTools智能语音转文字工具全攻略

5分钟快速上手&#xff1a;AsrTools智能语音转文字工具全攻略 【免费下载链接】AsrTools ✨ AsrTools: Smart Voice-to-Text Tool | Efficient Batch Processing | User-Friendly Interface | No GPU Required | Supports SRT/TXT Output | Turn your audio into accurate text…...

编程新知 2026/3/31 9:20:01

基于SpringBoot的CLAP音频分类服务开发实战

基于SpringBoot的CLAP音频分类服务开发实战 1. 项目背景与价值 音频分类在实际业务中有着广泛的应用场景&#xff0c;比如内容审核、智能家居、媒体分析等。传统的音频分类方案通常需要大量标注数据来训练专用模型&#xff0c;这在很多实际场景中成本高昂且不够灵活。 CLAP&…...

编程新知 2026/3/31 9:09:55

GLM-Image技术验证：长宽比对构图影响实测数据

GLM-Image技术验证&#xff1a;长宽比对构图影响实测数据 1. 项目背景介绍 GLM-Image是由智谱AI开发的先进文本到图像生成模型&#xff0c;提供了一个美观易用的Web交互界面。这个界面基于Gradio构建&#xff0c;让用户能够轻松使用GLM-Image模型生成高质量的AI图像。 在实际…...

编程新知 2026/3/31 8:39:46

SOONet模型Python入门实践：用10行代码实现视频片段搜索

SOONet模型Python入门实践&#xff1a;用10行代码实现视频片段搜索 你是不是也遇到过这种情况&#xff1a;手里有一段很长的视频&#xff0c;想快速找到某个特定场景&#xff0c;比如“主角第一次出场的时候”或者“那个爆炸的镜头”&#xff0c;结果只能手动拖进度条&#xf…...

编程新知 2026/3/31 8:15:31

图图的嗨丝造相-Z-Image-Turbo效果对比：8bit vs 16bit精度推理对渔网袜边缘锐度的影响

图图的嗨丝造相-Z-Image-Turbo效果对比&#xff1a;8bit vs 16bit精度推理对渔网袜边缘锐度的影响 1. 引言&#xff1a;当AI绘画遇上“渔网袜”细节 最近在玩一个挺有意思的AI绘画模型——图图的嗨丝造相-Z-Image-Turbo。这个模型专门针对“大网渔网袜”这种特定服饰的生成做…...

编程新知 2026/3/31 7:47:24