• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Тонкий намек на 8 марта.

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

Нет прав для скачивания
Тонка намекаем девушка, что сегодня 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);
  }
}
И наслаждаемся нашем творением:
0054244.gif
Автор
baltun
Скачиваний
0
Просмотры
185
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

Верх Низ