雪花
本文最后更新于 -1 天前,其中的信息可能已经有所发展或是发生改变。

代码来源互联网。

<div id="snow"></div>
<style>
    #snow {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        pointer-events: none;
        transition: filter .5s ease;
    }
    html.darkmode #snow{
        filter: invert(0.3);
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
particlesJS('snow', 
  {
    "particles":{
      "number":{
        "value":104,
        "density":{
          "enable":true,
          "value_area":800
        }
      },
      "color":{
        "value":"#fff"
      },
      "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":true,
        "anim":{
          "enable":false,
          "speed":1,
          "opacity_min":0.1,
          "sync":false
        }
      },
      "size":{
        "value":10,
        "random":true,
        "anim":{
          "enable":false,
          "speed":40,
          "size_min":0.1,
          "sync":false
        }
      },
      "line_linked":{
        "enable":false,
        "distance":500,
        "color":"#ffffff",
        "opacity":0.4,
        "width":2
      },
      "move":{
        "enable":true,
        "speed":3,
        "direction":"bottom",
        "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":"bubble"
        },
        "onclick":{
          "enable":true,
          "mode":"repulse"
        },
        "resize":true
      },
      "modes":{
        "grab":{
          "distance":400,
          "line_linked":{
            "opacity":0.5
          }
        },
        "bubble":{
          "distance":400,
          "size":4,
          "duration":0.3,
          "opacity":1,
          "speed":3
        },
        "repulse":{
          "distance":200,
          "duration":0.4
        },
        "push":{
          "particles_nb":4
        },
        "remove":{
          "particles_nb":2
        }
      }
    },
    "retina_detect":true
  }
);
</script>
上一篇
下一篇