当前位置： 首页 > news >正文

【CSS Tricks】如何做一个粒子效果的logo

news 2026/2/6 8:28:45

效果展示

效果展示

代码展示

<!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方法，用于更新粒子的位置并绘制它们。这个方法执行以下操作：

  • 计算粒子到目标位置的加速度。
  • 更新粒子的速度，考虑加速度和摩擦力。
  • 根据速度更新粒子的位置。
  • 绘制粒子。

初始化过程

初始化过程包括以下步骤：

  1. 设置画布的宽度和高度以匹配窗口的尺寸。
  2. 创建一个图像对象并设置src属性，以便加载图像。
  3. 当图像加载完成后，绘制到画布上。
  4. 调用initScene函数来创建粒子数组。
    initScene函数执行以下操作：
  5. 清空粒子数组。
  6. 获取画布上图像的数据。
  7. 遍历图像的每个像素，根据像素的透明度决定是否在该位置创建一个粒子。

事件监听

代码监听了以下事件：

  • resize：当窗口大小变化时，调整画布的大小并重新初始化场景。
  • mousemove：当鼠标移动时，更新mouse对象的x和y属性。
  • touchmove：适配移动端，当触摸移动时，更新mouse对象的x和y属性。
  • touchend：模拟手离开屏幕后，将mouse对象的x和y属性重置为初始值。

动画循环

使用requestAnimationFrame根据屏幕刷新率去更新画面：

  1. 清空画布。
  2. 遍历粒子数组，调用每个粒子的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>…...

编程日记 2024/9/22 3:38:47

如何使用ssm实现基于Javaweb的网上花店系统的设计与实现

TOC ssm653基于Javaweb的网上花店系统的设计与实现jsp 研究背景 自计算机发展以来给人们的生活带来了改变。第一代计算机为1946年美国设计&#xff0c;最开始用于复杂的科学计算&#xff0c;占地面积、开机时间要求都非常高&#xff0c;经过数十几的改变计算机技术才发展到今…...

编程日记 2024/9/22 3:37:45

Elastic 的 OpenTelemetry PHP 发行版简介

作者&#xff1a;Pawel Filipczak 宣布 OpenTelemetry PHP 的 Elastic 发行版的第一个 alpha 版本。在本篇博文中了解使用 OpenTelemetry 来检测 PHP 应用程序是多么简单。 我们很高兴推出 OpenTelemetry PHP 的 Elastic Distribution 的第一个 alpha 版本。在这篇文章中&…...

编程日记 2024/9/22 3:36:43

TCP 和 UDP 协议的区别？

参考TCP 和 UDP的区别_tcp和udp的区别-CSDN博客...

编程日记 2024/9/22 3:35:42

【PHP】使用thinkphp5查询最大值时，把varchar类型字段转换成数字

有时候我们需要把carchar类型的字段进行聚合函数运运行&#xff08;max、min、avg&#xff09;&#xff0c;但是如果直接用聚合函数&#xff0c;得到的结果是错误的&#xff0c;因为varchar字段是字符串&#xff0c;无法直接使用聚合函数&#xff0c;所以需要把varchar字段转换…...

编程日记 2024/9/22 3:32:40

Java 正则表达式详解

正则表达式 (Regular Expression&#xff0c;简称 regex) 是一种强大的文本处理工具&#xff0c;可以用来匹配、搜索和替换文本中的特定模式。在 Java 中&#xff0c;正则表达式由 java.util.regex 包提供支持。 1. 理解正则表达式语法 正则表达式使用特殊的字符和符号来定义…...

编程日记 2024/9/22 3:30:37

MySQL篇（窗口函数/公用表达式（CTE））(持续更新迭代）

目录 讲解一&#xff1a;窗口函数 一、简介 二、常见操作 1. sumgroup by常规的聚合函数操作 2. sum窗口函数的聚合操作 三、基本语法 1. Function(arg1,..., argn) 1.1. 聚合函数 sum函数&#xff1a;求和 min函数 &#xff1a;最小值 1.2. 排序函数 1.3. 跨行函数…...

编程日记 2024/9/22 3:27:35

Jira Cloud涨价5%-20%，钉钉项目Teambition成优选替代

近日&#xff0c;Jira再次宣布涨价&#xff0c;Cloud版涨幅达到5%-20%&#xff0c;这一消息来源于Atlassian官方面向合作伙伴发布的2024年最新涨价通知。 Atlassian旗下核心产品&#xff0c;包括Jira、Confluence、JiraServiceManagement等的Cloud版本价格将有所提高&#xff…...

编程日记 2024/9/22 3:26:34

Python语言基础教程（下）4.0

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…...

编程日记 2024/9/22 3:25:32

【HTTP】构造HTTP请求和状态码

状态码 用于响应中&#xff0c;表示响应的结果如何 正确&#xff1f;错误&#xff1f;什么原因&#xff1f; HTTP 中的状态码都是标准约定好的 200 OK 成功了&#xff0c;一切顺利 在抓包到的响应中 404 Not Found 访问的资源&#xff08;URL 中的路径&#xff09;没找…...

编程日记 2024/9/22 3:23:30

Delta Lake如何使用

1. 安装 Java 确保你的系统上安装了 Java 8 或更高版本。可以通过以下命令检查 Java 是否已安装&#xff1a; java -version2. 安装 Apache Spark 下载 Spark&#xff1a; 从 Apache Spark 官方网站 下载适合的版本&#xff0c;建议下载预编译的版本&#xff08;例如&#xf…...

编程日记 2024/9/22 3:19:25

面试题 - parallelStream() 有什么缺点 - ForkJoinPool，它和传统的线程池（如 ThreadPoolExecutor）的区别

底层使用 ForkJoinPool &#xff0c;不同与线程池适用于连续的内存分布的数据结构&#xff0c;如数组和ArrayList()&#xff0c;并不适用于链表适用于 cpu 密集的工作&#xff0c;cpu 的核数多效率高&#xff0c;并行流能否真正提高性能&#xff0c;很大程度上取决于系统的可用…...

编程日记 2024/9/22 3:18:24

切换淘宝最新镜像源npm详细讲解

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; 在中国大陆&#xff0c;npm&#xff08;Node Package Manager&#xff09;的默认源由于网络限制&#xff0c;速度可能较慢。为了解决这个问题&#xff0c;淘宝提供了一个镜像源&#xff0c;它同步了 npm 的…...

编程日记 2024/9/22 3:17:22

STM32F407单片机编程入门(十二) FreeRTOS实时操作系统详解及实战含源码

文章目录 一.概要二.什么是实时操作系统三.FreeRTOS的特性四.FreeRTOS的任务详解1.任务函数定义2.任务的创建3.任务的调度原理 五.CubeMX配置一个FreeRTOS例程1.硬件准备2.创建工程3.调试FreeRTOS任务调度 六.CubeMX工程源代码下载七.小结 一.概要 FreeRTOS是一个迷你的实时操…...

编程日记 2024/9/22 3:16:21

网络安全-利用 Apache Mod CGI

目录 一、环境 二、开始操作 三、总结 一、环境 蚁剑官网拉取 二、开始操作 蚁剑连接 一样终端命令不能执行 可以看到putenv已经禁用 我们开始一下&#xff0c;跳入一个新终端且可以执行命令 我们具体看一下干了什么事情 上传了一个htaccess这个文件的作用是让以后所有ant文…...

编程日记 2024/9/22 3:15:19

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:#…...

编程日记 2024/9/22 3:13:18

【小沐学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 …...

编程日记 2024/9/22 3:12:16

数字IC设计\FPGA 职位经典笔试面试整理--语法篇 Verilog System Verilog(部分)

注&#xff1a; 资料都是基于网上一些博客分享和自己学习整理而成的 Verilog 1. 数据类型 Verilog一共有19种数据类型 基础四种数据类型&#xff1a;reg型&#xff0c;wire型&#xff0c;integer型&#xff0c;parameter型 reg型   reg类型是寄存器数据类型的关键字。寄存…...

编程日记 2024/9/22 3:10:14

【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…...

编程日记 2024/9/22 3:09:13

嵌入式Linux：模块化编程

目录 内核模块 模块特点 最简单的模块 内核模块的程序结构 模块加载函数 模块卸载函数 模块参数 导出符号 作者简介 内核模块 linux内核整体结构非常庞大，其包含的组件也非常多。 怎么把需要的部分包含在内核中呢？ 一种办法是把所有的需要的功能都编译到内核中。…...

编程日记 2024/9/22 3:08:11

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08