Великолепный снег с Parallax эффектом глубины и пространства на чистом CSS
Классно реализованный снег с эффектом глубины! Особенно поражает то, что автор смог достигнуть плавности и реалистичности очень простым кодом, используя лишь CSS3!
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.snow, .snow:before, .snow:after { position: absolute; top: -600px; left: 0; bottom: 0; right: 0; background-image: radial-gradient(5px 5px at 542px 38px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 50px 280px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 340px 486px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 189px 565px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 95px 594px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 412px 416px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 269px 19px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 353px 496px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 562px 239px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 510px 336px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 147px 227px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 282px 150px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 281px 239px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 402px 340px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 409px 30px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 173px 555px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 548px 263px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 277px 355px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 16px 535px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 299px 427px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 220px 371px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 576px 486px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 211px 473px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 568px 531px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 524px 34px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 430px 243px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 210px 594px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 399px 490px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 344px 182px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 376px 371px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 558px 201px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 300px 67px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 7px 377px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 386px 569px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 161px 44px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 30px 533px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 583px 168px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 52px 270px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 164px 412px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 589px 529px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 29px 42px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 409px 149px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 216px 350px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 295px 267px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 519px 74px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 249px 160px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 272px 438px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 213px 237px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 329px 413px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 77px 425px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 188px 304px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 272px 437px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 514px 405px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 50px 370px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 357px 165px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 334px 553px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 360px 441px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 180px 391px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 440px 163px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 546px 230px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 5px 381px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 310px 335px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 124px 175px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 284px 489px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 587px 167px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 454px 55px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 265px 277px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 149px 113px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 235px 242px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 91px 442px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)); background-size: 600px 600px; animation: snow 3s linear infinite; content: ""; } .snow:after { margin-left: -200px; opacity: 0.4; animation-duration: 6s; animation-direction: reverse; filter: blur(3px); } .snow:before { animation-duration: 9s; animation-direction: reverse; margin-left: -300px; opacity: 0.65; filter: blur(1.5px); } @keyframes snow { to { transform: translateY(600px); } } |
2#: На страницах, где должен идти снег, сразу после открывающего тега <body> поместите:
|
1 |
<div class="snow"></div> |
