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

用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/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…...

SQL-CRUD-1

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

linux 命令行下的计算器

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

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…...

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…...

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

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

测试开发工程师(QA)职业到底需要干些什么?part7:硬件测试工程师QA

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

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

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

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

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

C++自主点餐系统

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

jconsole jvisualvm

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

python vtkUnstructuredGrid 转 vtkAlgorithmOutput_

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

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年如何行稳致远?

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

开源博客项目Blog .NET Core源码学习(12:App.Application项目结构分析)

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

AES加密解密算法

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

计算机网络(05)

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

6、ChatGLM3-6B 部署实践

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

python面试题(1~10)

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

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

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...