javascript - 使用 Particles.JS 复制动画

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
}

很遗憾，我没有收到任何动画响应。

如果您对此事有任何见解，我将不胜感激!谢谢

Answer 1

为什么不起作用:

你看不到动画是因为你没有定义它的帧。

演示有这个 CSS

#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;
}

这很棒，但如果没有实际的动画帧就什么也做不了。动画帧稍后在工作表中定义，如下所示(示例):

@keyframes appear {
 0% {
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
  100% {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
}

您可以尝试将以上内容添加到您的 CSS 中是否有效。如果是这样，那就太好了，如果不是，请像下面这样创建您自己的

---

如何从头开始

您可以在 #particles-js 上使用 CSS 动画或里面的 Canvas 。

设置为 transform: scale(0)默认情况下，然后使用 css animations , 从 0 带回比例至 1

JsFiddle

body {
  overflow: hidden
}

#particles-js {
  opacity: 0;
  transform: scale(0);
  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;
  animation: explode 1s linear;
  animation-fill-mode: forwards
}

@keyframes explode {
  from {}
  to {
    transform: scale(1);
    opacity: 1;
  }
}

<div id="particles-js">

要仅将动画应用于粒子，您需要将动画应用于 <canvas>元素。使用您当前的代码，添加下面的 CSS 就足够了，因为其他所有内容都已设置。

#particles-js .particles-js-canvas-el {
  opacity: 0;
  transform: scale(0);
  animation: explode 1s linear;
  animation-fill-mode: forwards;
}

@keyframes explode {
  from {}
  to {
    transform: scale(1);
    opacity: 1;
  }
}