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

小秋同学 08-14 09:02:18 学习园地
摘要: 这是一个非常OK的特效,网页动态粒子线条联动特效,具体可以插件本官网【可能已经随模板更换了】。具体方法如下:JS部分 一般放在网页底部: <script>/* ---- particles.js config ----摘要: 这是一个非常OK的特效,网页动态粒子线条联动特效,具体可以插件本官网【可能已经随模板更换了】。具体方法如下:JS部分 一般放在网页底部: <script>/* ---- particles.js config ----

这是一个非常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.qiuhai.com/study/672.html发布于 08-14 09:02:18
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~