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

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

news 2025/6/8 21:05:41

效果展示

效果展示

代码展示

<!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

Web设计之登录网页源码分享，PHP数据库连接，可一键运行！

HTML 页面结构&#xff08;index.html&#xff09; 1. 流星雨动态背景 2. 主体界面&#xff08;包含登录和注册表单&#xff09; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/6/8 21:01:20

ubuntu中使用docker

上一篇我已经下载了一个ubuntu:20.04的镜像&#xff1b; 1. 查看所有镜像 sudo docker images 2. 基于本地存在的ubuntu:20.04镜像创建一个容器&#xff0c;容器的名为cppubuntu-1。创建的时候就会启动容器。 sudo docker run -itd --name cppubuntu-1 ubuntu:20.04 结果出…...

编程新知 2025/6/8 20:22:45

Web安全：XSS、CSRF等常见漏洞及防御措施

Web安全&#xff1a;XSS、CSRF等常见漏洞及防御措施 一、XSS&#xff08;跨站脚本攻击&#xff09; 定义与原理 XSS攻击指攻击者将恶意脚本&#xff08;如JavaScript、HTML标签&#xff09;注入到Web页面中&#xff0c;当用户访问该页面时&#xff0c;脚本在浏览器端执行&…...

编程新知 2025/6/8 17:19:50

React Navive初识

文章目录 搭建开发环境安装 Node、homebrew、Watchman安装 Node安装 homebrew安装 watchman 安装 React Native 的命令行工具&#xff08;react-native-cli&#xff09;创建新项目编译并运行 React Native 应用在 ios 模拟器上运行 调试访问 App 内的开发菜单 搭建开发环境 在…...

编程新知 2025/6/8 13:16:29

uniapp 设置手机不息屏

在使用 UniApp 开发应用时&#xff0c;有时需要在设备长时间未操作时实现息屏保护功能&#xff0c;以节省电量和保护屏幕。以下是如何在 UniApp 中实现这一功能的步骤。 示例一 // 保持屏幕常亮 uni.setKeepScreenOn({keepScreenOn: true });// 监听应用进入后台事件 uni.onH…...

编程新知 2025/6/8 12:41:11

3. 简述node.js特性与底层原理

&#x1f63a;&#x1f63a;&#x1f63a; 一、Node.js 底层原理&#xff08;简化版&#xff09; Node.js 是一个 基于 Chrome V8 引擎构建的 JavaScript 运行时&#xff0c;底层核心由几部分组成&#xff1a; 组成部分简要说明 1.V8 引擎 将 JS 编译成机器码执行&#xff0…...

编程新知 2025/6/8 12:30:10

Svelte 核心语法详解：Vue/React 开发者如何快速上手？

在很多地方早就听到过svelte的大名了&#xff0c;不少工具都有针对svelte的配置插件&#xff0c;比如vite \ unocss \ svelte. 虽然还没使用过&#xff0c;但是发现它的star82.9k数很高哦&#xff0c;学习一下它与众不同的魔法。 这名字有点别扭&#xff0c;好几次都写错。 sve…...

编程新知 2025/6/8 9:48:50

go中的接口返回设计思想

go中的接口返回设计思想 前言 在学习AI编码过程中&#xff0c;产生了类似以下结构的代码 &#xff1a; type MQClient interface {PublishMessage(queue string, message interface{}) error...... } ... type RabbitMQClient struct {conn *amqp.Connectionchannel *amqp.C…...

编程新知 2025/6/8 8:33:24

二、【ESP32开发全栈指南：ESP32 GPIO深度使用】

GPIO&#xff08;通用输入输出&#xff09; 是ESP32最基础却最核心的功能。本文将带你深入ESP32的GPIO操作&#xff0c;通过按键读取和LED控制实现物理按键→ESP32→LED的完整信号链路。 一、ESP32 GPIO核心特性速览 34个可编程GPIO&#xff08;部分引脚受限&#xff09;输入模…...

编程新知 2025/6/8 5:08:41

深度学习环境配置指南：基于Anaconda与PyCharm的全流程操作

一、环境搭建前的准备 1. 查看基础环境位置 conda env list 操作说明&#xff1a;通过该命令确认Anaconda默认环境&#xff08;base&#xff09;所在磁盘路径&#xff08;如D盘&#xff09;&#xff0c;后续操作需跳转至该磁盘根目录。 二、创建与激活独立虚拟环境 1. 创…...

编程新知 2025/6/8 3:21:55