【CSS Tricks】如何做一个粒子效果的logo
效果展示
代码展示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>粒子效果Logo</title><style>body,html {margin: 0;padding: 0;overflow: hidden;}</style></head><body><canvas id="canvas"></canvas><script>class Particle {constructor(x, y) {this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.dest = { x, y };this.r = Math.random() * 1 * Math.PI;this.vx = (Math.random() - 0.5) * 25;this.vy = (Math.random() - 0.5) * 25;this.accX = 0;this.accY = 0;this.friction = Math.random() * 0.025 + 0.94;this.color = colors[Math.floor(Math.random() * colors.length)];}render() {this.accX = (this.dest.x - this.x) / 1000;this.accY = (this.dest.y - this.y) / 1000;this.vx += this.accX;this.vy += this.accY;this.vx *= this.friction;this.vy *= this.friction;this.x += this.vx;this.y += this.vy;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);ctx.fill();const a = this.x - mouse.x;const b = this.y - mouse.y;const distance = Math.sqrt(a * a + b * b);if (distance < radius * 75) {this.accX = (this.x - mouse.x) / 50;this.accY = (this.y - mouse.y) / 50;this.vx += this.accX;this.vy += this.accY;}}}const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let particles = [];let mouse = { x: -9999, y: -9999 };const colors = ["#3f73fa", "#7ffde1", "#aedce9"];let radius = 1.5;function onMouseMove(e) {mouse.x = e.clientX;mouse.y = e.clientY;}function onTouchMove(e) {if (e.touches.length > 0) {mouse.x = e.touches[0].clientX;mouse.y = e.touches[0].clientY;}}function onTouchEnd(e) {mouse.x = -9999;mouse.y = -9999;}function initScene() {particles = [];const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);for (let x = 0; x < imgData.width; x += 6) {for (let y = 0; y < imgData.height; y += 6) {const i = (y * imgData.width + x) * 4;if (imgData.data[i + 3] > 200) {particles.push(new Particle(x, y));}}}}function render() {requestAnimationFrame(render);ctx.clearRect(0, 0, canvas.width, canvas.height);particles.forEach((particle) => particle.render());}window.addEventListener("resize", () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;initScene();});window.addEventListener("mousemove", onMouseMove);window.addEventListener("touchmove", onTouchMove);window.addEventListener("touchend", onTouchEnd);canvas.width = window.innerWidth;canvas.height = window.innerHeight;const img = new Image();img.onload = () => {ctx.drawImage(img,canvas.width / 2 - img.width / 2,canvas.height / 2 - img.height / 2);initScene();render();};img.src = "./qbbmnn.png";</script></body>
</html>代码注解
代码的主要部分包括粒子类的定义、初始化过程、事件监听和动画循环。
粒子类（Particle）
每个粒子对象都有以下属性：
x和y：粒子的当前位置。dest.x和dest.y：粒子的目标位置。r：粒子随机的大小。vx和vy：粒子的水平和垂直速度。accX和accY：粒子的水平和垂直加速度。friction：粒子的摩擦系数，影响其减速。color：粒子的颜色。
render方法，用于更新粒子的位置并绘制它们。这个方法执行以下操作：
- 计算粒子到目标位置的加速度。
- 更新粒子的速度，考虑加速度和摩擦力。
- 根据速度更新粒子的位置。
- 绘制粒子。
初始化过程
初始化过程包括以下步骤：
- 设置画布的宽度和高度以匹配窗口的尺寸。
- 创建一个图像对象并设置
src属性，以便加载图像。 - 当图像加载完成后，绘制到画布上。
- 调用
initScene函数来创建粒子数组。
initScene函数执行以下操作： - 清空粒子数组。
- 获取画布上图像的数据。
- 遍历图像的每个像素，根据像素的透明度决定是否在该位置创建一个粒子。
事件监听
代码监听了以下事件：
resize：当窗口大小变化时，调整画布的大小并重新初始化场景。mousemove：当鼠标移动时，更新mouse对象的x和y属性。touchmove：适配移动端，当触摸移动时，更新mouse对象的x和y属性。touchend：模拟手离开屏幕后，将mouse对象的x和y属性重置为初始值。
动画循环
使用requestAnimationFrame根据屏幕刷新率去更新画面：
- 清空画布。
- 遍历粒子数组，调用每个粒子的
render方法。
可以自定义的部分
radius：通过调整这个变量的值，控制鼠标弹开粒子的范围。colors：根据自己喜好去填写多个颜色，最少两个。img：可以准备一张透明底白色字的图片，粒子效果会吸附到白色字的笔触上。例如（因为是白色字透明底，所以需要在夜间模式下app才能看清）：
相关文章：
【CSS Tricks】如何做一个粒子效果的logo
效果展示 代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>粒子效果Logo</title>…...
如何使用ssm实现基于Javaweb的网上花店系统的设计与实现
TOC ssm653基于Javaweb的网上花店系统的设计与实现jsp 研究背景 自计算机发展以来给人们的生活带来了改变。第一代计算机为1946年美国设计，最开始用于复杂的科学计算，占地面积、开机时间要求都非常高，经过数十几的改变计算机技术才发展到今…...
Elastic 的 OpenTelemetry PHP 发行版简介
作者：Pawel Filipczak 宣布 OpenTelemetry PHP 的 Elastic 发行版的第一个 alpha 版本。在本篇博文中了解使用 OpenTelemetry 来检测 PHP 应用程序是多么简单。 我们很高兴推出 OpenTelemetry PHP 的 Elastic Distribution 的第一个 alpha 版本。在这篇文章中&…...
TCP 和 UDP 协议的区别？
参考TCP 和 UDP的区别_tcp和udp的区别-CSDN博客...
【PHP】使用thinkphp5查询最大值时，把varchar类型字段转换成数字
有时候我们需要把carchar类型的字段进行聚合函数运运行（max、min、avg），但是如果直接用聚合函数，得到的结果是错误的，因为varchar字段是字符串，无法直接使用聚合函数，所以需要把varchar字段转换…...
Java 正则表达式详解
正则表达式 (Regular Expression，简称 regex) 是一种强大的文本处理工具，可以用来匹配、搜索和替换文本中的特定模式。在 Java 中，正则表达式由 java.util.regex 包提供支持。 1. 理解正则表达式语法 正则表达式使用特殊的字符和符号来定义…...
MySQL篇（窗口函数/公用表达式（CTE））(持续更新迭代）
目录 讲解一：窗口函数 一、简介 二、常见操作 1. sumgroup by常规的聚合函数操作 2. sum窗口函数的聚合操作 三、基本语法 1. Function(arg1,..., argn) 1.1. 聚合函数 sum函数：求和 min函数 ：最小值 1.2. 排序函数 1.3. 跨行函数…...
Jira Cloud涨价5%-20%，钉钉项目Teambition成优选替代
近日，Jira再次宣布涨价，Cloud版涨幅达到5%-20%，这一消息来源于Atlassian官方面向合作伙伴发布的2024年最新涨价通知。 Atlassian旗下核心产品，包括Jira、Confluence、JiraServiceManagement等的Cloud版本价格将有所提高ÿ…...
Python语言基础教程（下）4.0
✨博客主页： https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》：.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏： https://blog.csdn.net/m0_63815035/cat…...
【HTTP】构造HTTP请求和状态码
状态码 用于响应中，表示响应的结果如何 正确？错误？什么原因？ HTTP 中的状态码都是标准约定好的 200 OK 成功了，一切顺利 在抓包到的响应中 404 Not Found 访问的资源（URL 中的路径）没找…...
Delta Lake如何使用
1. 安装 Java 确保你的系统上安装了 Java 8 或更高版本。可以通过以下命令检查 Java 是否已安装： java -version2. 安装 Apache Spark 下载 Spark： 从 Apache Spark 官方网站 下载适合的版本，建议下载预编译的版本（例如…...
 有什么缺点 - ForkJoinPool，它和传统的线程池（如 ThreadPoolExecutor）的区别)
面试题 - parallelStream() 有什么缺点 - ForkJoinPool，它和传统的线程池（如 ThreadPoolExecutor）的区别
底层使用 ForkJoinPool ，不同与线程池适用于连续的内存分布的数据结构，如数组和ArrayList()，并不适用于链表适用于 cpu 密集的工作，cpu 的核数多效率高，并行流能否真正提高性能，很大程度上取决于系统的可用…...
切换淘宝最新镜像源npm详细讲解
大家好，我是程序员小羊！ 前言： 在中国大陆，npm（Node Package Manager）的默认源由于网络限制，速度可能较慢。为了解决这个问题，淘宝提供了一个镜像源，它同步了 npm 的…...
STM32F407单片机编程入门(十二) FreeRTOS实时操作系统详解及实战含源码
文章目录 一.概要二.什么是实时操作系统三.FreeRTOS的特性四.FreeRTOS的任务详解1.任务函数定义2.任务的创建3.任务的调度原理 五.CubeMX配置一个FreeRTOS例程1.硬件准备2.创建工程3.调试FreeRTOS任务调度 六.CubeMX工程源代码下载七.小结 一.概要 FreeRTOS是一个迷你的实时操…...
网络安全-利用 Apache Mod CGI
目录 一、环境 二、开始操作 三、总结 一、环境 蚁剑官网拉取 二、开始操作 蚁剑连接 一样终端命令不能执行 可以看到putenv已经禁用 我们开始一下，跳入一个新终端且可以执行命令 我们具体看一下干了什么事情 上传了一个htaccess这个文件的作用是让以后所有ant文…...
ACE之ACE_Reactor_Notify
简介 ACE_Reactor_Notify作为Reactor的实现类ACE_Reactor_Impl内部通知来唤醒eventloop 抽象 #mermaid-svg-9UguTLk5S9joDMfi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9UguTLk5S9joDMfi .error-icon{fill:#…...
【小沐学GIS】blender导入OpenStreetMap城市建筑（blender-osm、blosm）
文章目录 1、简介1.1 blender1.2 osm地图 2、OpenStreetMap下载方式2.1 Simple2.2 Overpass API2.3 OSM星球2.4 Geofabrik下载2.5 其他方法2.6 BBBike 3、blender-osm插件3.1 简介3.2 操作 结语 1、简介 1.1 blender https://www.blender.org/ Blender 是一款免费的开源 3D …...
数字IC设计\FPGA 职位经典笔试面试整理--语法篇 Verilog System Verilog(部分)
注： 资料都是基于网上一些博客分享和自己学习整理而成的 Verilog 1. 数据类型 Verilog一共有19种数据类型 基础四种数据类型：reg型，wire型，integer型，parameter型 reg型 reg类型是寄存器数据类型的关键字。寄存…...
【EtherCAT】CiA402简介
目录 1、CiA402是CANopen协议的子协议 2、CiA402是 用于驱动和运动控制的CANopen设备配置文件 3、 CiA402主要由三部分组成 4、CiA介绍 4.1、操作模式 4.2、对象字典 5、一般对象字定义 6、详细对象字定义 7、Profile position mode 8、Homing mode 9、 Position co…...
嵌入式Linux：模块化编程
目录 内核模块 模块特点 最简单的模块 内核模块的程序结构 模块加载函数 模块卸载函数 模块参数 导出符号 作者简介 内核模块 linux内核整体结构非常庞大，其包含的组件也非常多。 怎么把需要的部分包含在内核中呢？ 一种办法是把所有的需要的功能都编译到内核中。…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...