【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内核整体结构非常庞大，其包含的组件也非常多。 怎么把需要的部分包含在内核中呢？ 一种办法是把所有的需要的功能都编译到内核中。…...
AI Agent在智能风控中的实战：多智能体欺诈检测与预警
AI Agent在智能风控中的实战：多智能体欺诈检测与预警 你有没有过明明是正常交易却被银行冻结账户的糟糕体验？或是听说过某电商平台上线新活动首日就被黑产团伙薅走数千万补贴的新闻？随着黑产欺诈向团伙化、专业化、动态化演进，传统依赖规则引擎、单模型机器学习的风控体系已…...
IPFS去中心化存储实战指南：黑马程序员音乐播放器项目开发完整教程
IPFS去中心化存储实战指南：黑马程序员音乐播放器项目开发完整教程 【免费下载链接】BlockChain 黑马程序员 120天全栈区块链开发 开源教程 项目地址: https://gitcode.com/gh_mirrors/blockchain95/BlockChain 你是否想过如何构建一个真正去中心化的音乐播放…...
Ventoy终极指南：一个U盘启动所有系统，告别重复格式化烦恼 [特殊字符]
Ventoy终极指南：一个U盘启动所有系统，告别重复格式化烦恼 😎 【免费下载链接】Ventoy A new bootable USB solution. 项目地址: https://gitcode.com/GitHub_Trending/ve/Ventoy 还在为每次安装系统都要重新制作启动盘而烦恼吗&#x…...
保姆级教程：在ArcGIS Pro插件中集成你的自定义工具箱（以‘消除重复要素’为例）
从脚本到按钮：ArcGIS Pro插件开发实战指南 在GIS日常工作中，我们常常会遇到一些重复性的数据处理任务。比如数据质检环节的"消除重复要素"操作，虽然可以通过Python脚本实现，但每次都需要打开IDE或Python窗口执行代码&am…...
隧道裂缝剥落病害AI识别系统
我国现有公路隧道超2.5万座，总里程超2.8万公里，其中运营超过15年的老旧隧道占比达35%。据交通运输部2025年统计，年均因隧道结构病害导致的交通中断超1200次，直接经济损失超45亿元。传统检测模式暴露四大核心痛点：检测周…...
为什么鸿蒙 App 最终都会走向状态驱动？
子玥酱 （掘金 / 知乎 / CSDN / 简书 同名） 大家好，我是 子玥酱，一名长期深耕在一线的前端程序媛 👩💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚…...
OmenSuperHub：释放惠普游戏本性能的纯净开源控制中心
OmenSuperHub：释放惠普游戏本性能的纯净开源控制中心 【免费下载链接】OmenSuperHub Control Omen laptop performance, fan speeds, and keyboard lighting, and unlock power limits. 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 还在为官方…...
用Azure Kinect DK和Body Tracking SDK，5分钟实现一个实时人体骨骼点检测Demo（C++版）
5分钟实战：用Azure Kinect DK实现实时人体骨骼点追踪（C版） 当你第一次拿到Azure Kinect DK时，最令人兴奋的莫过于它强大的人体追踪能力。这款深度相机不仅能捕捉高清彩色图像，更能通过AI算法实时重建人体骨骼关节点。本…...
机器学习与深度学习在社交媒体心理健康检测中的权衡与选择
1. 项目概述：当AI遇见心灵，社交媒体心理健康检测的技术十字路口在社交媒体成为我们数字生活延伸的今天，海量的文本数据无意中记录着用户的情感波动与心理状态。作为一名长期混迹于数据科学和自然语言处理（NLP）一线的从…...
通用物联网开发板设计：基于ESP8266的硬件集成与开发实践
1. 项目概述：为什么我们需要一块“通用”的物联网开发板？在捣鼓了几年物联网项目之后，我发现自己桌面上堆满了各种开发板：ESP8266、ESP32、Arduino Uno、STM32 Nucleo……每个项目都要重新连线、配置电源、焊接传感器接口…...