【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内核整体结构非常庞大，其包含的组件也非常多。 怎么把需要的部分包含在内核中呢？ 一种办法是把所有的需要的功能都编译到内核中。…...
别再纠结硬件滚动了！用Arduino+SSD1306库实现超长文本的软件滚动显示（附完整代码）
ArduinoSSD1306实现超长文本流畅滚动的终极方案 当你在创客项目中需要显示超出屏幕宽度的日志数据或长消息时，硬件滚动的局限性就会暴露无遗。我曾在一个环境监测项目中遇到这个问题——传感器数据经常超过OLED屏幕的16字符显示限制，硬件滚动方案直接截断…...
5分钟部署Qwen3-VL-8B：MacBook也能跑的视觉语言模型，零基础上手
5分钟部署Qwen3-VL-8B：MacBook也能跑的视觉语言模型，零基础上手 1. 为什么选择Qwen3-VL-8B-Instruct-GGUF 1.1 轻量级多模态模型的突破 Qwen3-VL-8B-Instruct-GGUF是阿里通义实验室最新推出的视觉语言模型，它最大的特点就是小身材大能量。…...
【第四周】论文精读：Frustratingly Simple Retrieval Improves Challenging, Reasoning-Intensive Benchmarks
极简检索即可大幅刷新高难度推理基准主流观点认为简单RAG无法提升MMLU、MATH、GPQA等高难度推理任务，甚至会损害性能；本文推翻这一共识，证明核心瓶颈并非检索范式，而是缺少高质量、广覆盖、可单机部署的检索库；提出COM…...
ARM64架构下利用docker-compose实现tendis单机版高效离线部署指南
1. 为什么选择ARM64架构部署Tendis？ 最近几年ARM架构处理器越来越流行，从树莓派到苹果M系列芯片，再到各种云服务器的ARM实例，性能提升明显的同时功耗还更低。我去年接手的一个项目就要求全部跑在ARM64服务器上，当时部署…...
YOLOv12涨点改进 | CVPR 2025 | 全网独家首发、Neck特征融合改进篇 | YOLOv12引入ADWM自适应双重加权融合模块，有效优化特征的加权与融合，减少冗余并增强目标特征
一、本文介绍 🔥本文给大家介绍使用ADWM模块改进YOLOv12目标检测网络模型，能够有效优化特征的加权与融合，减少冗余并增强目标特征的表现，提升目标检测的准确性和鲁棒性，特别是在多尺度、小目标和复杂背景下。通过ADWM的引入，YOLOv12的性能将得到显著改善，适应性和准确…...
开源音频格式转换终极指南：ncmdumpGUI实现数字音乐资产自由流转的完整方案
开源音频格式转换终极指南：ncmdumpGUI实现数字音乐资产自由流转的完整方案 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换，Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 在数字音乐时代…...
ChatGPT、Claude、Gemini大模型实战对比：哪个更适合你的业务场景？
ChatGPT、Claude、Gemini大模型实战对比：哪个更适合你的业务场景？ 当企业面临AI大模型选型时，往往陷入技术参数的海洋却难以找到业务适配的答案。本文将从真实业务需求出发，通过客服对话、内容创作、数据分析三个典型场景的实测数…...
4个步骤掌握ComfyUI-WanVideoWrapper：从环境搭建到视频生成全攻略
4个步骤掌握ComfyUI-WanVideoWrapper：从环境搭建到视频生成全攻略 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper ComfyUI-WanVideoWrapper是一款强大的AI视频生成插件，作…...
大气层系统全链路实战指南：从需求分析到风险控制的完整实施路径
大气层系统全链路实战指南：从需求分析到风险控制的完整实施路径 【免费下载链接】Atmosphere-stable 大气层整合包系统稳定版 项目地址: https://gitcode.com/gh_mirrors/at/Atmosphere-stable 大气层系统（Atmosphere）作为Switch定制化…...
终极解决方案：Calibre中文路径插件让书库管理回归本真
终极解决方案：Calibre中文路径插件让书库管理回归本真 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文（中文）命名 项目地址: h…...