【NPM】particles.vue3 + tsparticles 实现粒子效果

news2024/11/20 8:30:13

在 NPM 官网搜索这两个库并安装:

npm install element-plus --save
npm i tsparticles

使用提供的 vue 案例和方法:

<template>
  <div>
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="{
        background: {
          color: {
            value: '#0d47a1'
          }
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: 'push'
            },
            onHover: {
              enable: true,
              mode: 'repulse'
            },
            resize: true
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40
            },
            push: {
              quantity: 4
            },
            repulse: {
              distance: 200,
              duration: 0.4
            }
          }
        },
        particles: {
          color: {
            value: '#ffffff'
          },
          links: {
            color: '#ffffff',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1
          },
          collisions: {
            enable: true
          },
          move: {
            direction: 'none',
            enable: true,
            outModes: {
              default: 'bounce'
            },
            random: false,
            speed: 6,
            straight: false
          },
          number: {
            density: {
              enable: true,
              area: 800
            },
            value: 80
          },
          opacity: {
            value: 0.5
          },
          shape: {
            type: 'circle'
          },
          size: {
            value: { min: 1, max: 5 },
          }
        },
        detectRetina: true
      }"
    />
  </div>
</template>

<script setup>
import { loadFull } from "tsparticles";
const particlesInit = async engine => {
  await loadFull(engine);
  // await loadSlim(engine);
};
</script>

<style lang="scss" scoped></style>

即可出现粒子效果。

在这里插入图片描述

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

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

相关文章

【C语言刷题】#define宏实现一个整数的二进制位的奇数位和偶数位交换

本篇文章目录 1. 分析如何交换1.2 得到所有奇数位1.2 得到所有偶数位1.3 奇数位和偶数位交换后相加 2. 实现交换 1. 分析如何交换 这里为了方便演示&#xff0c;使用较小的正整数&#xff08;负数也是一样的&#xff0c;只不过要用算下补码&#xff09;&#xff0c;且不用一个…

VMware Greenplum 7 正式发布!

在当今瞬息万变的商业环境中&#xff0c;企业持续寻求创新途径以优化运营、简化决策过程&#xff0c;并构建独特的竞争优势。实现这些目标的关键在于有效利用海量数据资源。然而&#xff0c;这项任务并不轻松。数据的数量、复杂性和来源呈现出爆发性增长&#xff0c;同时从数据…

Quest 3最新规则调整,降低了积分获取难度和交互Dapp数量

自上周Quest 3启动以来&#xff0c;获得来自社区小伙伴们的支持。你们的热情和参与程度超出了我们的预期&#xff0c;仅在第一天Sui Discord服务器的活动量就惊人地增长了600&#xff05;&#xff01;我们非常高兴与大家一起踏上这个旅程。 同时&#xff0c;我们也关注了到社区…

亿发软件:现代化机械制造行业建设企业一体化管理系统的必要性

机械设备制造行业作为传统制造产业&#xff0c;面临着许多挑战&#xff1a; &#xff08;1&#xff09;项目进度管理困难&#xff0c;难以迅速掌握每个项目的物料采购进度和加工件生产进度。 &#xff08;2&#xff09;采购计划难以制定&#xff0c;各个部门之间的信息交流不…

从创业者的角度告诉你AI问答机器人网页的重要性

在数字化时代&#xff0c;创业者面临着越来越多的挑战。而AI问答机器人网页正成为创业者们的必备工具。它可以提供即时客户支持、降低运营成本&#xff0c;并实现全天候服务。接下来&#xff0c;我将从创业者的角度阐述一下&#xff0c;AI问答机器人网页为什么那么重要&#xf…

10kb的照片尺寸怎么弄?几个步骤轻松搞定!

为了图片方便在互联网上分享、传输或存储&#xff0c;我们常常会有缩小图片的需求&#xff0c;那么如何进行操作呢&#xff1f;下面分享了三种实用的方法。 方法一&#xff1a;使用嗨格式压缩大师 1、在电脑上打开安装好的“嗨格式压缩大师”&#xff0c;在首界面中点击“图片…

国际十大优质期货投资app软件最新排名(综合版)

在当今的金融市场中&#xff0c;期货投资成为了越来越多人的选择。随着科技的发展&#xff0c;许多优质的期货投资app软件也应运而生。这些软件不仅提供了便捷的投资交易工具&#xff0c;还为投资者提供了丰富的市场分析和风险管理手段。 本文将介绍国际十大优质期货投资app软…

ant中的environment属性

在ant的配置文件中&#xff0c;可以设置属性environment的值&#xff0c;设置的这个值就作为访问环境变量的前缀。例如声明了environment“env”&#xff0c;那么就可以通过env.<环境变量名称>来访问环境变量。 例如创建了一个Java工程&#xff0c;在工程目录下有一个bu…

GP09|公司赚的多,股票涨的好?

量化策略开发&#xff0c;高质量社群&#xff0c;交易思路分享等相关内容 大家好&#xff0c;今天我们来分享GP09策略。前面很多期我们都不同程度用到了量价因子。这一期我们单纯的使用财务因子来构建&#xff0c;实际我们都知道单纯的财务因子中&#xff0c;已经无法get超额收…

大数据开发中的秘密武器:探索Hadoop纠删码的奇妙世界

随着大数据技术的发展&#xff0c;HDFS作为Hadoop的核心模块之一得到了广泛的应用。为了系统的可靠性&#xff0c;HDFS通过复制来实现这种机制。但在HDFS中每一份数据都有两个副本&#xff0c;这也使得存储利用率仅为1/3&#xff0c;每TB数据都需要占用3TB的存储空间。因此&…

[Linux c/c++] futex

参考&#xff1a; Pthread locks: Mutex vs Spilocks vs Futex – Deep Code DiveLocking During multi-threading or multi-processing, the biggest challenge is selecting types of locks. When writing C code, one can manually write their own locking mechanism or c…

Photon——Fusion服务器(Failed to find entry-points:System.Exception: )

文章目录 前言解决方案:1.报警信息如下2.选择3d urp3.引入Fusion之后选择包管理,点击Burst中的Advanced Project Settings4.勾选两个预设选项5.引入官网unity.burst6.更新后报警消失总结前言 制作局域网游戏,出现未找到进入点报警 Failed to find entry-points 解决方案: …

使用sysbench为mysql全方位压测,单台mysql服务器支持多少并发?

文章目录 一、压测前的储备知识1、普通的Java应用系统部署在机器上能抗多少并发2、mysql单台数据库能支持多少并发 二、使用sysbench压测数据库1、准备mysql数据库2、安装sysbench3、准备压测用户和数据库4、基于sysbench构造测试表和测试数据5、对数据库进行360度的全方位测试…

软件工程与计算总结(十七)软件构造

一.概述 1.定义 软件构造是以编程为主的活动&#xff0c;类似于软件实现。但软件构造又不止编程这么简单&#xff0c;除了核心的编程任务之外&#xff0c;还设计详细设计&#xff08;数据结构与算法设计&#xff09;、单元测试、集成与集成测试以及其他活动~ 2.软件构造是设计…

mac电脑文献管理 EndNote 21最新 for Mac

EndNote 21 Mac版不仅能够快速有效的的帮助用户管理自己的文献&#xff0c;而且还可以用来创建个人参考文献库&#xff0c;添加各种文本&#xff0c;图像&#xff0c;连接&#xff0c;表格等等内容&#xff01; - 搜索数百个在线资源以获取参考和PDF - 只需点击一下即可查找参…

centos 内核对应列表 内核升级 linux

近期服务器频繁出现问题&#xff0c;找运维同事排查&#xff0c;说是系统版本和内核版本和官方不一致&#xff0c;如下&#xff1a; Release 用的是7.8, kernal 用的是 5.9 我一查确实如此&#xff1a; 内核&#xff1a; Linux a1messrv1 5.9.8-1.el7.elrepo.x86_64 发行版 Cen…

怎么使用动态代理IP提升网络安全,动态代理IP有哪些好处呢?

目录 一、什么是动态代理IP 二、动态代理IP的优势 三、动态代理IP的代码实现 1. 安装依赖库 2. 获取代理IP 3. 使用代理IP请求目标网站 4. 动态更换代理IP 五、总结 一、什么是动态代理IP 动态代理IP是指在网络通信过程中&#xff0c;代理服务器不是固定IP地址&#x…

Java前后端分离项目中跨域问题 讲解

Java前后端分离项目中跨域问题 讲解 前言什么是跨域问题&#xff1f;CORS解决跨域问题使用Servlet过滤器使用Spring Framework的CrossOrigin注解 总结 我是将军我一直都在&#xff0c;。&#xff01; 前言 当在Java前后端分离项目中工作时&#xff0c;跨域问题是一个常见的挑战…

如何通过SK集成chatGPT实现DotNet项目工程化?

智能助手服务 以下案例将讲解如何实现天气插件 当前文档对应src/assistant/Chat.SemanticServer项目 首先我们介绍一下Chat.SemanticServer的技术架构 SemanticKernel 是什么&#xff1f; Semantic Kernel是一个SDK&#xff0c;它将OpenAI、Azure OpenAI和Hugging Face等大…

2023年中国婚礼仪式服务行业发展趋势分析:市场集中度有望持续提升[图]

婚礼仪式服务指为备婚人群提供从婚礼筹备到结婚典礼所需的一系列相关产品及服务&#xff0c;婚礼仪式服务提供商包括一站式婚礼仪式服务提供商和垂直婚礼仪式服务提供商。 婚礼仪式服务提供商分类 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#xff09; 婚礼仪式服…