知乎登录页面背景效果动态代码。

最近看很多网站用了知乎登陆背景动态效果,于是研究了一下。

代码如下:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>知乎登陆界面动态背景</title>
    <script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  </head>
  <body>
    <div id="particles-js" style="position:absolute; top: 0; z-index: -1; width: 100%;height: 100%;"><canvas class="particles-js-canvas-el" width="1303" height="960" style="width: 100%; height: 100%;"></canvas></div>
    <script>
      particlesJS("particles-js",{particles:{number:{value:20,density:{enable:!0,value_area:1000}},color:{value:"#e1e1e1"},shape:{type:"circle",stroke:{width:0,color:"#000000"},polygon:{nb_sides:5},image:{src:"img/github.svg",width:100,height:100}},opacity:{value:0.5,random:!1,anim:{enable:!1,speed:1,opacity_min:0.1,sync:!1}},size:{value:15,random:!0,anim:{enable:!1,speed:180,size_min:0.1,sync:!1}},line_linked:{enable:!0,distance:650,color:"#cfcfcf",opacity:0.26,width:1},move:{enable:!0,speed:2,direction:"none",random:!0,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:600,rotateY:1200}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!1,mode:"repulse"},onclick:{enable:!1,mode:"push"},resize:!0},modes:{grab:{distance:400,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:!0});
    </script>
  </body>
</html>

源码点我

本文链接:

https://www.wrdan.com/tech/particles-js.html
1 + 3 =
快来做第一个评论的人吧~