这是一个非常OK的特效，网页动态粒子线条联动特效，具体可以插件本官网【可能已经随模板更换了】。具体方法如下：


JS部分 一般放在网页底部：


 <script>

/* ---- particles.js config ---- */


particlesJS("particles-js", {

  particles: {

    number: {

      value: 80,

      density: {

        enable: true,

        value_area: 800

      }

    },

    color: {

      value: ["#E4E5E7"]

    },

    shape: {

      type: ["circle"],

      stroke: {

        width: 0,

        color: "#fff"

      },

      polygon: {

        nb_sides: 3

      } 

    },

    opacity: {

      value: 1,

      random: false,

      anim: {

        enable: false,

        speed: 1,

        opacity_min: 0.1,

        sync: false

      }

    },

    size: {

      value: 2,

      random: true,

      anim: {

        enable: false,

        speed: 10,

        size_min: 10,

        sync: true

      }

    },

    line_linked: {

      enable: true,

      distance: 150,

      color: "#808080",

      opacity: 0.1,

      width: 1

    },

    move: {

      enable: true,

      speed: 5,

      direction: "none",

      random: false,

      straight: false,

      out_mode: "out",

      bounce: false,

      attract: {

        enable: false,

        rotateX: 600,

        rotateY: 1200

      }

    }

  },

  interactivity: {

    detect_on: "canvas",

    events: {

      onhover: {

        enable: true,

        mode: "grab"

      },

      onclick: {

        enable: true,

        mode: "push"

      },

      resize: true

    },

    modes: {

      grab: {

        distance: 140,

        line_linked: {

          opacity: 1

        }

      },

      bubble: {

        distance: 400,

        size: 40,

        duration: 2,

        opacity: 8,

        speed: 3

      },

      repulse: {

        distance: 200,

        duration: 0.4

      },

      push: {

        particles_nb: 4

      },

      remove: {

        particles_nb: 2

      }

    }

  },

  retina_detect: true

});

</script>



样式代码 一般放在 当页头部 </head>前


<style>


#particles-js {

   position:fixed;

  height: 100%;

  width: 100%;

}


.text {

  color:#333;

  position:fixed;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 200px;

  width: 300px;

  top: calc(50% - 100px);

  left: calc(50% - 150px);font-size:4em; font-weight: 400;

}


.img {

  display: inline-block;

  height: 100px;

  z-index: 100;

}

</style>


在<body>下面增加以下代码：


  <div id="particles-js"></div>


然后下载一个JS文件