放射状粒子动画：纯CSS渲染万千粒子

2023-11-22 06:58:44

让我们开启一场美轮美奂的CSS粒子动画之旅吧！纯CSS打造的放射状粒子动画，将带给你超凡的视觉体验。

粒子画布的构建

首先，我们需要创建一个容纳粒子的画布，它将成为粒子动画的舞台。

<div id="particle-canvas"></div>

接着，通过CSS赋予它合适的样式：

#particle-canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

粒子画布已经搭建完毕，接下来，让我们添加粒子元素。

粒子的诞生：

每个粒子都是一个元素，它由:before和:after伪元素组成。这样的设计可以让我们利用一个元素实现两个粒子，从而减少DOM元素的数量。

<div class="particle">
  <div class="particle-before"></div>
  <div class="particle-after"></div>
</div>

同样，我们需要通过CSS来定义粒子的样式：

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.particle-before,
.particle-after {
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.particle-before {
  background-color: #ff0000;
  animation: particle-before-anim 2s infinite alternate;
}

.particle-after {
  background-color: #00ff00;
  animation: particle-after-anim 2s infinite alternate;
}

@keyframes particle-before-anim {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes particle-after-anim {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-200px, -200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

每个粒子都由两个伪元素组成，分别用不同的颜色和动画效果来实现粒子运动。

动画的奥秘

粒子的动画效果由CSS的关键帧动画实现。关键帧动画可以通过@keyframes规则来定义，它指定了动画在不同时间点的样式。

@keyframes particle-before-anim {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes particle-after-anim {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-200px, -200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

在上面的代码中，我们定义了两个关键帧动画：particle-before-anim和particle-after-anim。这两个动画都具有相同的动画时间，即2秒，并且都是无限循环和交替执行的。

particle-before-anim动画定义了粒子从中心向右上方移动，然后再回到中心的运动轨迹。particle-after-anim动画则定义了粒子从中心向左下方移动，然后再回到中心的运动轨迹。

粒子世界的诞生

现在，我们已经拥有了粒子元素和动画效果，接下来，让我们把它们组合起来，创造出一个生机勃勃的粒子世界。

<div id="particle-canvas">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
</div>

通过CSS，我们还可以为每个粒子添加随机的起始位置和动画延迟时间，让粒子运动更加自然。

.particle {
  animation-delay: calc(random(0, 1) * 2s);
}

这样，我们就可以看到粒子从画布中心向外放射状运动的效果了。

粒子运动的进阶

为了让粒子运动更加丰富，我们可以通过修改动画关键帧来实现不同的运动轨迹。

例如，我们可以让粒子在运动过程中不断改变运动方向：

@keyframes particle-before-anim {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200px, 200px);
  }
  50% {
    transform: translate(0, 400px);
  }
  75% {
    transform: translate(-200px, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes particle-after-anim {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-200px, -200px);
  }
  50% {
    transform: translate(0, -400px);
  }
  75% {
    transform: translate(200px, -200px);
  }
  100% {
    transform: translate(0, 0);
  }
}