css 粒子时钟

下面是一个基于CSS实现的粒子时钟示例，可以在网页上显示一个数字时钟，时钟中的数字由许多小圆点组成，组成小圆点的粒子会随着时间的变化而变化位置。代码如下：

HTML代码：

<div class="clock">
  <div class="digit-container digit-1">
    <div class="digit"></div>
  </div>
  <div class="digit-container digit-2">
    <div class="digit"></div>
  </div>
  <div class="digit-container digit-3">
    <div class="digit"></div>
  </div>
  <div class="digit-container digit-4">
    <div class="digit"></div>
  </div>
  <div class="digit-container digit-5">
    <div class="digit"></div>
  </div>
  <div class="digit-container digit-6">
    <div class="digit"></div>
  </div>
</div>

CSS代码：

.clock {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
}

.digit-container {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
}

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

.digit-1 {
  top: 0;
  left: 50%;
}

.digit-2 {
  top: 50%;
  left: 0;
}

.digit-3 {
  top: 50%;
  left: 100%;
}

.digit-4 {
  top: 100%;
  left: 50%;
}

.digit-5 {
  top: 100%;
  left: 0;
}

.digit-6 {
  top: 100%;
  left: 100%;
}

@keyframes digit-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes digit-2 {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(450deg);
  }
}

@keyframes digit-3 {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(630deg);
  }
}

.clock .digit-1 .digit {
  animation: digit-1 43200s linear infinite;
}

.clock .digit-2 .digit {
  animation: digit-2 3600s linear infinite;
}

.clock .digit-3 .digit {
  animation: digit-3 600s linear infinite;
}

.clock .digit-4 .digit {
  animation: digit-2 60s linear infinite;
}

.clock .digit-5 .digit {
  animation: digit-3 10s linear infinite;
}

.clock .digit-6 .digit {
  animation: digit-2 1s linear infinite;
}

该CSS时钟可以实现数字时钟的效果，其中每个数字由一个圆点矩阵组成，通过CSS动画控制圆点的位置来显示不同的数字。