用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动画，将比例从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;
  }
}