tsparticle实现svg轮廓粒子特效-html代码-BFW代码库

tsparticle实现svg轮廓粒子特效

代码语言：html

所属分类：粒子

代码描述：tsparticle实现svg轮廓粒子特效

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/* ---- reset ---- */
body {
  margin: 0;
  font: normal 75% Arial, Helvetica, sans-serif;
}

canvas {
  display: block;
  vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #323031;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
</style>

</head>
<body translate="no">


<div id="tsparticles"></div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/pathseg.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/tsparticles.min.js"></script>
<script>
tsParticles.load("tsparticles", {
  detectRetina: false,
  fpsLimit: 30,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        enable: false,
        mode: "push" },

      onDiv: {
        elementId: "repulse-div",
        enable: false,
        mode: "repulse" },

      onHover: {
        enable: true,
        mode: "bubble",
        parallax: {
          enable: false,
          force: 2,
          smooth: 10 } },


      resize: true },

    modes: {
      bubble: {
        distance: 40,
        duration: 2,
        opacity: 8,
        size: 6,
        speed: 3 },

      connect: {
        distance: 80,
        lineLinked: {
          opacity: 0.5 },

        radius: 60 },

      grab: {
        distance: 400,
        lineLinked: {
          opacity: 1 } },


      push: {
        quantity: 4 },

      remove: {
        quantity: 2 },

      repulse: {
        distance: 200,
        duration: 0.4 },

      slow: {
        active: false,
        radius: 0,
        fac.........完整代码请登录后点击上方下载按钮下载查看