Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Закрыто Поиск кода

Статус
В этой теме нельзя размещать новые ответы.
Фев
340
160
Активный
2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.
CSS:
.snow-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.snow-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
  .snow-particle {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: snow-drift linear infinite;
    
    // Разные слои снега
    &.layer-1 {
      width: 3px;
      height: 3px;
      animation-duration: 10s;
      opacity: 0.6;
    }
    
    &.layer-2 {
      width: 4px;
      height: 4px;
      animation-duration: 15s;
      opacity: 0.7;
    }
    
    &.layer-3 {
      width: 5px;
      height: 5px;
      animation-duration: 20s;
      opacity: 0.9;
    }
  }
}

@keyframes snow-drift {
  0% {
    transform: translateY(-10px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(50px) rotate(180deg);
    opacity: 0;
  }
}
.generate-snow(@count, @i: 1) when (@i =< @count) {
  @layer: mod(@i, 3) + 1;
  .snow-particle:nth-child(@{i}) {
    left: percentage((@i / @count));
    animation-delay: ~"@{i}s";
    .layer-@{layer};
  }
  .generate-snow(@count, (@i + 1));
}

.generate-snow(100);
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху