css实现粒子图

要实现粒子图，可以使用CSS的伪元素和动画效果。

首先，创建一个包含粒子的容器，可以设置其大小和背景颜色。然后使用伪元素来创建每个粒子，可以使用圆形或者其他形状，设置其大小、颜色、位置等属性。

接下来，使用CSS动画效果来让粒子移动或者变换位置。可以使用@keyframes关键字来定义动画，然后将其应用到伪元素上。

最后，可以使用JavaScript来控制粒子的数量、速度、方向等属性，实现更加丰富的效果。

下面是一个简单的例子：

HTML代码：

<div class="particles">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
</div>

CSS代码：

.particles {
  width: 400px;
  height: 400px;
  background-color: #000;
  position: relative;
}

.particle {
  width: 10px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.particle:nth-child(1) {
  animation: move1 2s linear infinite;
}

.particle:nth-child(2) {
  animation: move2 3s linear infinite;
}

.particle:nth-child(3) {
  animation: move3 4s linear infinite;
}

.particle:nth-child(4) {
  animation: move4 5s linear infinite;
}

.particle:nth-child(5) {
  animation: move5 6s linear infinite;
}

@keyframes move1 {
  0% { top: 50%; left: 50%; }
  50% { top: 20%; left: 20%; }
  100% { top: 50%; left: 50%; }
}

@keyframes move2 {
  0% { top: 50%; left: 50%; }
  50% { top: 80%; left: 20%; }
  100% { top: 50%; left: 50%; }
}

@keyframes move3 {
  0% { top: 50%; left: 50%; }
  50% { top: 20%; left: 80%; }
  100% { top: 50%; left: 50%; }
}

@keyframes move4 {
  0% { top: 50%; left: 50%; }
  50% { top: 80%; left: 80%; }
  100% { top: 50%; left: 50%; }
}

@keyframes move5 {
  0% { top: 50%; left: 50%; }
  50% { top: 50%; left: 20%; }
  100% { top: 50%; left: 50%; }
}

这个例子中，我们创建了一个大小为400x400的容器，设置其背景为黑色。然后使用伪元素创建了5个白色圆形粒子，并分别应用了不同的动画效果。最后，通过@keyframes关键字定义了5个不同的动画，实现粒子的移动效果。