粒子向上持续瀑布动画效果（直接粘贴到记事本改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// …...
电力设施智能检测：TTPLA数据集赋能电网巡检自动化全流程指南
电力设施智能检测：TTPLA数据集赋能电网巡检自动化全流程指南 【免费下载链接】ttpla_dataset aerial images dataset on transmission towers and power lines 项目地址: https://gitcode.com/gh_mirrors/tt/ttpla_dataset 在电力行业数字化转型进程中&…...
如何进行 SEO 效果追踪和数据分析_SEO 优化与社交媒体营销的结合方式是什么
SEO 效果追踪和数据分析的重要性 在当今数字化时代，SEO（搜索引擎优化）和社交媒体营销已经成为企业推广和品牌建立的重要手段。如何进行有效的SEO效果追踪和数据分析，以及如何将SEO优化与社交媒体营销结合起来，是每一个…...
降AI工具为什么比自己改效果好？从算法角度解读
降AI工具为什么比自己改效果好？从算法角度解读 为什么同样是改写论文，专业工具能降到10%以下，自己手动改只能降到30%？ 这不是因为工具"更聪明"，而是因为工具在正确的层面做了正确的事情。理解了这个&#…...
全球人形机器人革命浪潮涌动，特斯拉/微美全息聚焦AI具身量产应用新突破！
近日，特斯拉(TSLA.US)马斯克宣布开启人类历史上规模最大的芯片制造项目——TERAFAB，目标实现每年超过1太瓦的算力产出。该设施将整合芯片设计、光刻、制造等全流程，其生产的部分芯片未来将直接用于驱动特斯拉电动车以及人形机器人。人形机器人…...
SI4463项目实战：如何像调试代码一样，用WDS3工具精准调试射频参数？
SI4463射频调试实战：用WDS3实现代码级精准配置 在嵌入式开发领域，我们早已习惯了通过断点调试、日志输出和变量监控来掌控程序行为。但当面对射频模块时，许多工程师却感到束手无策——那些神秘的十六进制配置值、模糊不清的寄存器描述&#x…...
如何提升桌面互动体验？BongoCat的个性化配置方案
如何提升桌面互动体验？BongoCat的个性化配置方案 【免费下载链接】BongoCat 🐱 跨平台互动桌宠 BongoCat，为桌面增添乐趣！ 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 在数字化工作与娱乐日益融合的今天&…...
告别无效筛选！酒店哥哥教你这样找会议酒店，省时省力不踩坑
找场地的痛，谁懂？办会人最崩溃的瞬间，莫过于找会议酒店的过程——连续一周泡在各类平台，刷遍几十家会议酒店，要么图片与实际场地天差地别。找会议酒店，俨然成了办会路上的第一道拦路虎，消耗大量…...
轻量级大模型新选择：Gemma-3-270m在边缘设备部署的完整步骤详解
轻量级大模型新选择：Gemma-3-270m在边缘设备部署的完整步骤详解 1. 为什么选择Gemma-3-270m作为边缘设备首选 如果你正在寻找一个既轻量又强大的AI模型来部署在边缘设备上，Gemma-3-270m绝对值得考虑。这个模型只有2.7亿参数，却继承了Gemini…...
RTX 4090D 24G显存适配方案：PyTorch 2.8镜像GPU利用率提升实测分析
RTX 4090D 24G显存适配方案：PyTorch 2.8镜像GPU利用率提升实测分析 1. 开篇：为什么选择RTX 4090D 24G RTX 4090D作为NVIDIA最新一代消费级显卡旗舰，24GB显存容量使其成为大模型训练和推理的理想选择。相比专业级显卡动辄数万的价格…...
为Cosmos-Reason1-7B开发自定义前端界面：Streamlit快速搭建
为Cosmos-Reason1-7B开发自定义前端界面：Streamlit快速搭建 你是不是已经部署好了Cosmos-Reason1-7B模型，但每次调用都得在命令行里敲代码，或者用那些不太顺手的脚本？想不想给你的模型加一个漂亮、好用，还能分享给别人…...