Разработка - Тонкий намек на 8 марта. | Все для вебмастера

Делаем разметку HTML без нее как вы поняли не куда:

HTML:

<div class="background">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Пишем стиль к нашему коду:

SCSS:

body {
  margin: 0;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #000000;
}

$animationDuration: 4s;
$amount: 100;
$particleSize: 3vmin;
.background span {
  width: $particleSize;
  height: $particleSize;
  border-radius: $particleSize;
  position: absolute;
  animation-name: move;
  animation-duration: $animationDuration;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  top: 50%;
  left: 50%;

  @for $i from 1 through $amount {
    &:nth-child(#{$i}) {
      $ratio: $i / $amount;
      animation-delay: ($ratio * 0.5) *  $animationDuration;
      $offset: if($i % 2 == 0, 30vmin, -30vmin);
      transform-origin: $offset 0px;
      background: hsl($ratio * 360deg, 70%, 50%);
    }
  }
}

@keyframes move {
  1% {
    z-index: 100;
  }
  60%,
  100% {
    z-index: 0;
    transform: rotate(360deg);
  }
}

И наслаждаемся нашем творением:

Разработка Тонкий намек на 8 марта.

Ещё ресурсы от baltun