使用 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 动画。

设置为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;
  }
}