JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="stars"></div>

SCSS

$stars: 350;         // Number of start per layer
$depth: 300;         // Depth between star layers
$speed: 3s;          // Number of seconds to transition between layers
$width: 1500;        // Width of the starfield
$height: 960;        // Height of the starfield

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background: #000;
  perspective: 340px;
}
.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  $box-shadow: ();
  @for $i from 0 through $stars {
    $box-shadow: $box-shadow, (random($width)-$width/2 + px) (random($height)-$height/2 + px) #fff;
  }
  box-shadow: $box-shadow;
  animation: fly $speed linear infinite;
  transform-style:preserve-3d;
  
  &:before, &:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
  }
  &:before {
    transform: translateZ(-$depth + px);
    opacity: .6;
  }
  &:after {
    transform: translateZ(-$depth * 2 + px);
    opacity: .4;
  }
}

@keyframes fly {
  from {
    transform: translateZ(0px);
    opacity:.6;
  }
  to {
    transform: translateZ($depth + px);
    opacity:1;
  }
}