kissxq

注册会员2020-08-14 09:14:45

网页特效粒子交叉线条背景动态鼠标联动【css】

这是一个非常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文件



网页特效粒子交叉线条背景动态鼠标联动【css】 下载

解压密码:

"收藏是宝,翻阅是金"
加入收藏
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!本文地址:https://www.2jc.cn/article/leam/671.html
人阅读

发表评论

加载中~
嘿,我来帮您!

VIP · 会员全站通免费下载

1,全站任意主题资源免费下载

2,专属客服一对一服务

3,积分规则:点击查看