Падающие блёстки в css
Как сделать анимацию в css как на этом видео
https://www.youtube.com/watch?v=CmiZpEEqGBs
Нужно чтобы был как бы дождь из блёсток
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
Вот пример создания анимации на scss.
$d: 130; // Плотность
$w: 400; // Размер сетки
$s: 3s; // Скорость
// Создание изображения
$grad: ();
@for $i from 0 to $d {
$v: random(4) + 2;
$a: random(5) * .1 + .5;
$grad: $grad, radial-gradient( $v+px $v+px at (random($w - $v * 2) + $v)+px (random($w - $v * 2) + $v)+px, rgba(255, 217, 25, $a) 50%, rgba(0, 0, 0, 0)) !global;
}
// CSS
html {
height: 100%;
background: linear-gradient(#000 30%, #333);
overflow: hidden;
}
.snow,
.snow:before,
.snow:after {
position: absolute;
top: -$w + px;
left: 0;
bottom: 0;
right: 0;
background-image: $grad;
background-size: $w + px $w + px;
animation: snow $s linear infinite;
content: "";
}
.snow:after {
margin-left: -$w/3 + px;
opacity: .4;
animation-duration: $s*2;
animation-direction: reverse;
filter: blur(3px);
}
.snow:before {
animation-duration: $s*3;
animation-direction: reverse;
margin-left: -$w/2 + px;
opacity: .65;
filter: blur(1.5px);
}
@keyframes snow {
to {
transform: translateY($w + px);
}
}
Демонстрация работы с скомпилированным scss в css
html {
height: 100%;
background: linear-gradient(#000 30%, #333);
overflow: hidden;
}
.snow, .snow:before, .snow:after {
position: absolute;
top: -400px;
left: 0;
bottom: 0;
right: 0;
background-image: radial-gradient(4px 4px at 350px 43px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 214px 202px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 76px 130px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 80px 144px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 155px 172px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 290px 211px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 318px 317px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 32px 197px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 315px 310px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 264px 68px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 90px 226px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 363px 308px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 126px 215px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 97px 332px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 340px 300px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 351px 13px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 221px 121px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 157px 302px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 168px 90px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 53px 147px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 218px 200px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 308px 109px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 341px 128px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 341px 18px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 366px 326px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 222px 22px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 358px 70px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 153px 216px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 74px 357px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 262px 380px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 274px 315px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 391px 280px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 44px 332px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 7px 11px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 20px 103px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 330px 261px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 43px 322px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 102px 283px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 216px 364px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 322px 241px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 110px 346px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 170px 365px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 12px 43px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 94px 29px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 16px 166px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 281px 311px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 173px 171px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 124px 181px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 195px 346px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 313px 250px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 382px 338px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 254px 359px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 319px 250px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 265px 304px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 378px 322px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 216px 348px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 385px 389px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 358px 254px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 121px 99px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 39px 75px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 128px 59px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 261px 19px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 163px 185px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 270px 345px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 116px 350px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 13px 62px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 209px 355px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 131px 317px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 262px 330px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 361px 386px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 58px 325px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 187px 56px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 158px 102px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 316px 279px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 99px 370px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 155px 99px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 74px 167px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 63px 269px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 371px 208px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 260px 180px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 83px 105px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 48px 140px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 114px 340px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 189px 324px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 80px 368px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 61px 65px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 326px 66px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 245px 236px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 45px 248px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 263px 166px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 390px 20px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 121px 137px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 305px 89px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 219px 168px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 214px 392px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 24px 217px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 164px 35px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 391px 377px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 99px 59px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 202px 297px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 215px 47px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 240px 218px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 64px 158px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 96px 215px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 204px 350px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 71px 58px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 246px 103px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 158px 154px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 97px 130px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 68px 257px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 149px 241px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 31px 371px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 278px 79px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 335px 208px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 317px 318px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 213px 96px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 119px 205px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 345px 9px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 378px 241px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 199px 129px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 23px 272px, rgba(255, 217, 25, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 379px 99px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 143px 30px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 51px 97px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 349px 81px, #ffd919 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 16px 188px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 78px 335px, rgba(255, 217, 25, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 343px 205px, rgba(255, 217, 25, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 334px 55px, rgba(255, 217, 25, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 100px 394px, #ffd919 50%, rgba(0, 0, 0, 0));
background-size: 400px 400px;
animation: snow 3s linear infinite;
content: "";
/*-- border: 1px solid white; */
}
.snow:after {
margin-left: -133.3333333333px;
opacity: 0.4;
animation-duration: 6s;
animation-direction: reverse;
filter: blur(3px);
}
.snow:before {
animation-duration: 9s;
animation-direction: reverse;
margin-left: -200px;
opacity: 0.65;
filter: blur(1.5px);
}
@keyframes snow {
to {
transform: translateY(400px);
}
}<div class="snow"></div>Код взят из ссылок ниже и немного изменен: