Question

我正在尝试复制在此页面加载时向前爆炸的粒子的动画效果：http://vincentgarreau.com/particles.js/

这是我的HTML：

<div class="container-fluid">
  <div id="particles-js">
    <canvas class="particles-js-canvas-el">
  </div>
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script>
    particlesJS.load('particles-js', 'assets/particles.json', function () {
      console.log('particles.json loaded...');
    });
  </script>
</div>

我的CSS：

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background position: 50% 50%;
  left: 0px;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: bottom;
}

#particles-js .particles-js-canvas-el {
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-animation: appear 1.4s 1;
  animation: appear 1.4s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

不幸的是，我没有得到任何动画回复。

我很感激对此事的任何见解！感谢

使用Particles.JS复制动画

0 个答案: