:root {
  overflow: hidden;
  --d: 5000px;
  --t: 100s;
  background: #202124;
}

.world {
  width: 50vmin;
  height: 50vmin;
  perspective: calc(var(--d) * .25);
  transform: translate(-50%, -50%);
}
.world,
.world .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: hsla(calc(var(--i) * 4 * 360), 60%, 90%, 0.05);
  -webkit-animation: var(--t) fly infinite linear;
          animation: var(--t) fly infinite linear;
  -webkit-animation-delay: calc(var(--t) * -1 * var(--i));
          animation-delay: calc(var(--t) * -1 * var(--i));
}

.particle {
  position: absolute;
  top: calc(-50% + var(--y) * 200%);
  left: calc(-50% + var(--x) * 200%);
  transform: translate3d(-50%, -50%, calc(var(--z) * var(--zp) * var(--d)));
  background: hsl(calc(var(--i) * 4 * 360), 60%, 90%);
  height: calc(var(--r) * 4vmin);
  width: calc(var(--r) * 4vmin);
  border-radius: 50%;
}

@-webkit-keyframes fly {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, var(--d));
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
    transform: translate3d(-50%, 0%, 0px);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -300%, calc(-1 * var(--d)));
  }
}

@keyframes fly {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, var(--d));
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
    transform: translate3d(-50%, 0%, 0px);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -300%, calc(-1 * var(--d)));
  }
}