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

news2024/11/13 15:21:48

效果展示

效果展示

代码展示

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

每个粒子对象都有以下属性:

  • xy:粒子的当前位置。
  • dest.xdest.y:粒子的目标位置。
  • r:粒子随机的大小。
  • vxvy:粒子的水平和垂直速度。
  • accXaccY:粒子的水平和垂直加速度。
  • friction:粒子的摩擦系数,影响其减速。
  • color:粒子的颜色。

render方法,用于更新粒子的位置并绘制它们。这个方法执行以下操作:

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

初始化过程

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

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

事件监听

代码监听了以下事件:

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

动画循环

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

  1. 清空画布。
  2. 遍历粒子数组,调用每个粒子的render方法。

可以自定义的部分

  • radius:通过调整这个变量的值,控制鼠标弹开粒子的范围。
  • colors:根据自己喜好去填写多个颜色,最少两个。
  • img:可以准备一张透明底白色字的图片,粒子效果会吸附到白色字的笔触上。例如(因为是白色字透明底,所以需要在夜间模式下app才能看清):

图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2151910.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VUE面试题(单页应用及其首屏加载速度慢的问题)

目录 一、单页应用 1.概念 2.单页面应用的优缺点 二、多页面应用&#xff1a; 1.概念 2.区别 三、SPA的实现 1.原理 2.方式&#xff1a; 3.Hash与History模式有什么区别 四、首屏加载速度慢如何优化 1.什么是首屏加载&#xff1f; 2.首屏加载慢的原因 3.如何解决…

OpenCV特征检测(2)边缘检测函数Canny()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 使用 Canny 算法 48在图像中查找边缘。 该函数使用 Canny 算法在输入图像中查找边缘&#xff0c;并在输出地图 edges 中标记它们。在 threshold1…

【0332】Postgres内核 start background worker(s)

0. 相关联文件 postmaster.cilist.h1. 启动 background worker(s) Postgres内核在 PostmasterMain() 函数中初始化 postmaster 守护进程时候,通过 maybe_start_bgworkers() 函数开始尝试启动 background worker(s)。 若时机恰当,则启动 background worker(s)。 作为一种附带…

基于云的补丁管理

什么是云补丁 云补丁或基于云的补丁管理是指扫描和检测缺失补丁、测试补丁并将它们部署到所需系统的过程&#xff0c;所有这些都通过基于云的控制台或软件完成。虽然补丁管理工作流程通常保持不变&#xff0c;但基于云的补丁管理的主要区别在于&#xff0c;整个过程仅通过基于…

iOS 18 适配 Xcode 16 问题

在适配 iOS 18 xcode 16时遇到的问题&#xff0c;记录一下。 1. 使用xcode 16 iOS 18 运行App时遇到&#xff0c;APP 的icon 出现空白现象。 原先APP icon 设置方案。 暂时解决方案&#xff1a; 2、

Python 低层多线程接口_thread的用法

_thread是python标准库中的一个低层多线程API&#xff0c;可以在进程中启动线程来处理任务&#xff0c;并且提供了简单的锁机制来控制共享资源的同步访问。本文就_thread模块的用法和特性做个简单的演示。 文章目录 一、进程和线程的区别二、_thread模块的用法2.1 派生线程2.2…

Percona发布开源DBaaS平台;阿里云RDS发布全球多活数据库(GAD);Redshift支持自然语言生成SQL

重要更新 1. 云栖大会于本周四/五在杭州举行&#xff0c;周五上午云栖主论坛阿里云数据库负责人李飞飞将发表《从数据到智能&#xff1a;DataAI驱动的云原生数据库》演讲&#xff0c;另外&#xff0c;还有多场次的数据库专场&#xff0c;感兴趣的可以现场或在线观看&#xff1a…

个人小结(2.0)

离谱&#xff0c;困扰着几周的问题今天偶然发现了解决方法。 问题如下&#xff1a;就是对应的模块引入爆红&#xff0c;但是单击进入引入的文件没有问题 然后它的提示是&#xff1a; 无法找到模块“../views/screen/index.vue”的声明文件。“c:/Users/10834/Desktop/0716_pro…

vue-使用refs取值,打印出来是个数组??

背景&#xff1a; 经常使用$refs去获取组件实例&#xff0c;一般都是拿到实例对象&#xff0c;这次去取值的时候发现&#xff0c;拿到的竟然是个数组。 原因&#xff1a; 这是vue的特性,自动把v-for里面的ref展开成数组的形式&#xff0c;哪怕你的ref名字是唯一的&#xff01…

DataX--Web:图形化界面简化大数据任务管理

在处理大数据任务时&#xff0c;频繁地修改配置文件或编写脚本可能会变得繁琐且容易出错。DataX Web提供了一个图形化界面&#xff0c;旨在简化这些操作&#xff0c;让用户通过直观的界面管理数据同步任务。 DataX Web简介 DataX Web是一个开源项目&#xff0c;它允许用户通过…

帧率和丢帧分析理论

一、丢帧问题概述 应用丢帧通常指的是在应用程序的界面绘制过程中&#xff0c;由于某些原因导致界面绘制的帧率下降&#xff0c;从而造成界面卡顿、动画不流畅等问题。以60Hz刷新率为例子&#xff0c;想要达到每秒60帧&#xff08;即60fps&#xff09;的流畅体验&#xff0c;每…

Python 序列( 列表 字典 元组 集合)

列表简介&#xff1a; 1.列表&#xff1a;用于存储任意数目、任意类型的数据集合。 2.列表是内置可变序列&#xff0c;是包含多个元素的有序连续的内存空间。列表的标准语法格式&#xff1a;a[10,20,30,40]其中&#xff0c;10,20,30,40这些称为&#xff1a;列表a的元素。 3.…

海外云市场分析

海外云市场数据洞察 2024 H1 季度数据 H1季度,全球云基础设施服务指数同比增长21%,达到798亿美元 (相比去年增加134亿美元),三大云服务提供商— AWS,微软Azure 和GCP 营收总增长率为24%,占总市场66%。 其中三大云厂商同比营收增长排序(2024 H1):微软 31%,G…

用户态缓存:环形缓冲区(Ring Buffer)

目录 环形缓冲区&#xff08;Ring Buffer&#xff09;简介 为什么选择环形缓冲区&#xff1f; 代码解析 1. 头文件与类型定义 1.1 头文件保护符 1.2 包含必要的标准库 1.3 类型定义 2. 环形缓冲区结构体 2.1 结构体成员解释 3. 辅助宏与内联函数 3.1 min 宏 3.2 is…

【Python报错已解决】xlrd.biffh.XLRDError: Excel xlsx file; not supported

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

最新LinPay码支付 免签支付系统源码 免授权版本(含搭建教程)

最新LinPay码支付 免签支付系统源码 免授权版本 服务集成商兼容市面所有易支付&#xff0c;兼容所有商城LinPay是专为个人站长打造的聚合免签系统&#xff0c;拥有卓越的性能和丰富的功能。它采用全新轻量化的界面UI&#xff0c;让您能更方便快捷地解决知识付费和运营赞助的难…

中间件知识点-消息中间件(Rabbitmq)一

消息中间件介绍 MQ的作用(优点)主要有以下三个方面&#xff1a; a.异步 b.解耦 c.削峰 MQ的作用(缺点)主要有以下三个方面&#xff1a; a.系统可用性降低 b.系统复杂度提高 c.存在消息一致性问题需要解决 备注&#xff1a; 引入MQ后系统的复杂度会大大提高。 以前服务之间可以…

移动开发(三):使用.NET MAUI打包第一个安卓APK完整过程

目录 一、修改AndroidManifest.xml 配置APP基本信息权限 二、修改项目属性调整输出Android包格式为APK 三、项目发布 四、APP分发 五、总结 之前给大家介绍过使用使用.NET MAUI开发第一个安卓APP,今天给大家介绍如何打包成APK,然后安装到安卓手机正常运行。这里还是沿用…

如何下载ComfyUI开发版

看B站视频&#xff0c;见用绘世可以下载ComfyUI开发版&#xff0c;而我又不想在电脑里放太多东西&#xff0c;于是研究了一下&#xff0c;如何直接从GitHub网站下载。具体步骤看图示。 看压缩包内容&#xff0c;应该直接解压覆盖就可以了&#xff0c;暂未有时间测试。

【JS】ESMoudle机制与符号绑定

前言 JS 模块化有两种方式&#xff0c;分别为&#xff1a;CommonJS 和 ESModule。与 CommonJS 不同&#xff0c;ESModule 是静态模块系统&#xff0c;意味着在代码编译阶段&#xff08;而不是运行时&#xff09;&#xff0c;模块依赖关系就已经被确定。 ESModule 优势 更好地…