粒子多边形蒙版

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

tsParticles.load("tsparticles", {
  detectRetina: false,
  fpsLimit: 60,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        enable: false,
        mode: "push"
      },
      onDiv: {
        elementId: "repulse-div",
        enable: false,
        mode: "repulse"
      },
      onHover: {
        enable: true,
        mode: "bubble",
        parallax: {
          enable: false,
          force: 2,
          smooth: 10
        }
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 40,
        duration: 2,
        opacity: 8,
        size: 6,
        speed: 3
      },
      connect: {
        distance: 80,
        lineLinked: { opacity: 0.5 },
        radius: 60
      },
      grab: {
        distance: 400,
        lineLinked: { opacity: 1 }
      },
      push: { quantity: 4 },
      remove: { quantity: 2 },
      repulse: {
        distance: 200,
        duration: 0.4
      },
      slow: {
        active: false,
        radius: 0,
        factor: 1
      }
    }
  },
  particles: {
    color: { value: "#ffffff" },
    lineLinked: {
      blink: false,
      color: "#ffffff",
      consent: false,
      distance: 30,
      enable: true,
      opacity: 0.4,
      width: 1
    },
    move: {
      attract: {
        enable: false,
        rotate: {
          x: 600,
          y: 1200
        }
      },
      bounce: false,
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: false,
      speed: 1,
      straight: false
    },
    number: {
      density: {
        enable: false,
        area: 2000
      },
      limit: 0,
      value: 200
    },
    opacity: {
      animation: {
        enable: true,
        minimumValue: 0.05,
        speed: 2,
        sync: false
      },
      random: false,
      value: 0.4
    },
    shape: {
      character: {
        fill: false,
        font: "Verdana",
        style: "",
        value: "*",
        weight: "400"
      },
      image: {
        height: 100,
        replaceColor: true,
        src: "images/github.svg",
        width: 100
      },
      polygon: { sides: 5 },
      stroke: {
        color: "#000000",
        width: 0
      },
      type: "circle"
    },
    size: {
      animation: {
        enable: false,
        minimumValue: 0.1,
        speed: 40,
        sync: false
      },
      random: true,
      value: 3
    }
  },
  polygon: {
    draw: {
      enable: true,
      lineColor: "rgba(255,255,255,0.2)",
      lineWidth: 0.5
    },
    move: {
      radius: 10
    },
    inlineArrangement: "equidistant",
    scale: 0.5,
    type: "inline",
    url: "http://www.jq22.com/jswj/smalldeer.svg"
  }
});
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
var count_particles = document.querySelector(".js-count-particles");
var update = function() {
  stats.begin();
  stats.end();
  if (tsParticles.domItem(0).particles.array) {
    count_particles.innerText = tsParticles.domItem(0).particles.array.length;
  }
  requestAnimationFrame(update);
};
requestAnimationFrame(update);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg