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

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Статус
В этой теме нельзя размещать новые ответы.
Пользователь
Регистрация
31 Июл 2025
Сообщения
93
Ищу код для extra.less со снегом
 
Активный
Регистрация
12 Фев 2024
Сообщения
298
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);
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху