Пользователь
- Регистрация
- 31 Июл 2025
- Сообщения
- 93
- Автор темы
- #1
Ищу код для extra.less со снегом
Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.
Зарегистрироваться!.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);