CSS Christmath

@Mamboleoo

Demo

<div class="window">
  [...]
</div>

.window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 800px;
}

<div class="window">
  <div class="container">
    [...]
  </div>
</div>

<div class="window">
  <div class="container">
   <span class="particle"></span>
    [2..398]
   <span class="particle"></span>
  </div>
</div>

Spherical Coordinates

$sphereRadius: 300px;
$colors: (#2E554A, #3A836C, #76AF87, #F5F1B9, #EA3458);
@for $i from 1 through 400 {
  $theta: random() * 360deg;
  $phi: (1 - sqrt(random())) * 90deg;
  @if random() > 0.5 { $phi: $phi * -1; }

  $x: $sphereRadius * cos($theta) * cos($phi);
  $y: $sphereRadius * sin($phi);
  $z: $sphereRadius * sin($theta) * cos($phi);

  .particle:nth-child(#{$i}) {
    transform: translate3d($x, $y, $z);
    $colorIndex: ceil(random() * 5);
    color: nth($colors, $colorIndex);
  }
}

Demo

.particle {
  [...]
  transform-style: preserve-3d;
  &::before {
    content: "";
    width: $radius * 2;
    height: $radius * 2;
    position: absolute;
    background: currentColor;
    border-radius: 50%;
    animation: oppositeRotation 25s infinite linear;
  }
}
@keyframes oppositeRotation {
  to {transform: rotateY(-1turn);}
}

.particle {
  [...]
  &:before {
    [...]
    animation: oppositeRotation 25s infinite linear,
               blink 6s infinite linear;
    box-shadow: 0 0 10px currentColor;
  }
}
@keyframes blink {
  5% {
    box-shadow: 0 0 10px 6px currentColor;
  }
  10% {
    box-shadow: 0 0 10px 0px currentColor;
  }
}

Demo

Demo

Demo