粒子向上持续瀑布动画效果（直接粘贴到记事本改html即可）
代码： 根据个人喜好修改即可
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>宽粒子向上效果</title><style>body {margin: 0;overflow: hidden;background-color: black;}canvas {display: block;}</style>
</head>
<body><canvas id="flameCanvas"></canvas><script>const canvas = document.getElementById('flameCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 10 + 5; // 粒子大小this.speedY = Math.random() * -4 - 2; // 向上速度this.speedX = (Math.random() - 0.5) * 2; // 水平随机速度this.color = `rgba(255, ${Math.floor(Math.random() * 100) + 155}, 0, 0.8)`; // 橙色this.friction = 0.98; // 摩擦力}update() {this.x += this.speedX;this.y += this.speedY;this.size *= this.friction; // 粒子逐渐变小if (this.size < 0.5) {this.size = 0; // 粒子消失}}draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}}class Flame {constructor(x, width) {this.x = x;this.width = width;this.particles = [];this.particleCount = 40; // 每次生成的粒子数量}update() {// 生成新粒子for (let i = 0; i < this.particleCount; i++) {const particleX = this.x + (Math.random() - 0.5) * this.width; // 生成在宽度范围内this.particles.push(new Particle(particleX, canvas.height));}// 更新粒子位置this.particles.forEach((particle, index) => {particle.update();if (particle.size <= 0) {this.particles.splice(index, 1); // 移除消失的粒子}});}draw() {this.particles.forEach(particle => {particle.draw();});}}const flames = [];const flameWidth = canvas.width * 0.6; // 宽度为屏幕的50%// 创建一束宽粒子flames.push(new Flame(canvas.width / 2, flameWidth));function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);flames.forEach(flame => {flame.update();flame.draw();});requestAnimationFrame(animate);}animate();</script>
</body>
</html>
相关文章：
粒子向上持续瀑布动画效果（直接粘贴到记事本改html即可）
代码： 根据个人喜好修改即可 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>宽粒子向上…...
卷积神经网络（CNN）：深度学习中的视觉奇迹
目录 一、什么是卷积神经网络？ 二、CNN的核心组件 1. 卷积层（Convolutional Layer） 2. 激活函数（Activation Function） 3. 池化层（Pooling Layer） 4. 全连接层（Fully Connected…...
Vue：加载本地视频
目录 封装视频弹框调用视频组件 封装视频弹框 <template><el-dialog class"videoBox" :title"title" :visible.sync"visible" width"40%" :before-close"handleOnClose" :close-on-click-modal"false" …...
论文阅读：A Generalization of Transformer Networks to Graphs
论文阅读：A Generalization of Transformer Networks to Graphs 论文地址1 摘要2 贡献Graph TransformerOn Graph Sparsity（图稀疏）On Positional Encodings（位置编码）3 Graph Transformer Architecture（架…...
中国计量大学《2022年801+2022年819自动控制原理真题》 (完整版）
本文内容，全部选自自动化考研联盟的：《25届中国计量大学801819自控考研资料》的真题篇。后续会持续更新更多学校，更多年份的真题，记得关注哦~ 目录 2022年801真题 2022年819真题 Part1：2022年完整版真题 2022年801…...
创客匠人运营课堂|增强用户的参与度和忠诚度，这一个工具就能实现！
活动投票是通过营销活动来提升用户粘性及平台裂变效果的工具。可以让活动得到更好的传播，平台品牌得到更大的曝光。 使用场景 活动投票是一种互动营销手段，适用于各种活动场景，具有增强用户的参与度和忠诚度，提高活动的透明度和公…...
k8s 微服务 ingress-nginx 金丝雀发布
目录 一 什么是微服务 二 微服务的类型 三 ipvs模式 3.1 ipvs模式配置方式 四 微服务类型详解 4.1 clusterip 4.2 ClusterIP中的特殊模式headless 4.3 nodeport 4.4 loadbalancer 4.5 metalLB 4.6 externalname 五 Ingress-nginx 5.1 ingress-nginx功能 5.2 部署…...
Elasticsearch不停机切换(上云)方案
如何给飞行中的飞机换引擎? 背景 业务背景 略 技术背景 线下集群40个索引左右，总数据量不大,不到100G因为ES承担的业务鉴权业务，所以不能接受停机割接 还有就是ES中数据来自各个业务方，推送的时机不定，也没有完备的重推机制&…...
归纳一下Invoke，beginInvoke，还有InvokeRequire
1.在WinForms中的Invoke和BeginInvoke WinForms是一个单线程的UI框架。在多线程的环境下操作UI控件时。需要使用Invoke和BeginInvoke跨线程调起UI线程 这两的区别如下Invoke：同步调用，当前代码不在UI线程上执行时，会卡住当前线程࿰…...
Prompt最佳实践｜指定输出的长度
在OpenAI的官方文档中已经提供了[Prompt Enginerring]的最佳实践，目的就是帮助用户更好的使用ChatGPT 编写优秀的提示词我一共总结了9个分类，本文讲解第6个分类：指定输出长度 提供更多的细节要求模型扮演角色使用分隔符指定任务步骤提供样例…...
离散制造 vs 流程制造：锚定精准制造未来，从装配线到化学反应，实时数据集成在制造业案例中的多维应用
使用 TapData，化繁为简，摆脱手动搭建、维护数据管道的诸多烦扰，轻量替代 OGG, Kettle 等同步工具，以及基于 Kafka 的 ETL 解决方案，「CDC 流处理 数据集成」组合拳，加速仓内数据流转，帮助企业…...
教你一招：在微信小程序中为用户上传的图片添加时间水印
在微信小程序开发过程中，我们常常需要在图片上添加水印，以保护版权或增加个性化元素。本文将为大家介绍如何在微信小程序中为图片添加时间水印，让你的小程序更具特色。 实现步骤： 1. 创建页面结构 在pages目录下创建一个名为upl…...
MySQL --基本查询(上）
文章目录 1.Create1.1单行数据全列插入1.2多行数据指定列插入1.3插入否则更新1.4替换 2.Retrieve2.1 select列2.1.1全列查询2.1.2指定列查询2.1.3查询字段为表达式2.1.4 为查询结果指定别名2.1.5结果去重 2.2where 条件2.2.1英语不及格的同学及英语成绩 ( < 60 )2.2.2语文成…...
mysql学习教程，从入门到精通，SQL 删除数据（DELETE 语句）（19）
1、SQL 删除数据（DELETE 语句） 在SQL中，TRUNCATE TABLE 语句用于删除表中的所有行，但不删除表本身。这个操作通常比使用 DELETE 语句删除所有行要快，因为它不记录每一行的删除操作到事务日志中，而是直接重…...
RoguelikeGenerator Pro - Procedural Level Generator
这是怎么一回事？ Roguelike Generator Pro：简单与力量的结合。使用GameObjects、Tilemaps或自定义解决方案轻松制作3D/2D/2.5D关卡。享受内置功能，如碰撞处理、高度变化、基本控制器和子随机化器，所有这些都由Drunkard Wlak程序生成算法提供支持。 我该如何使用它？ 简单：…...
反病毒技术和反病毒软件（网络安全小知识）
一、反病毒技术的难点 病毒变异与多态性：病毒开发者不断利用新技术和漏洞，创造出新的病毒变种和多态病毒。这些病毒能够自我变异，从而避开传统的基于特征码的检测方法，使得反病毒软件难以识别和清除。 未知病毒检测：在…...
位图与布隆过滤器
引例 给40亿个不重复的无符号整数，没排过序。给一个无符号整数，如何快速判断一个数是否在这40亿个数中。 思路1：排序二分查找 思路2：哈希或红黑树 因为40亿个整数要占用16GB 102410241024Byte 约等于10亿Byte1GB 40亿*4Byte 16G…...
【题解】—— LeetCode一周小结38
🌟欢迎来到 我的博客 —— 探索技术的无限可能！ 🌟博客的简介（文章目录） 【题解】—— 每日一道题目栏 上接：【题解】—— LeetCode一周小结37 16.公交站间的距离 题目链接：1184. 公交站间的距…...
EvilScience靶机详解
主机发现 arp-scan -l 得到靶机ip 192.168.229.152 端口扫描 nmap -sV -A -T4 192.168.1.20 这段代码使用 nmap 命令来扫描目标主机 192.168.1.20，并执行以下操作：-sV：探测开放的端口，以确定服务/版本信息。-A：启…...
算法练习题24——leetcode3296移山所需的最小秒数（二分模拟）
【题目描述】 【代码示例（java）】 class Solution {// 计算让工人们将山的高度降到0所需的最少时间public long minNumberOfSeconds(int mountainHeight, int[] workerTimes) {long left 0; // 最少时间初始为0long right 0; // 最大时间初始化为0// …...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...