粒子向上持续瀑布动画效果（直接粘贴到记事本改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// …...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...