Снег с помощью CSS3 анимации

283 06.12.2015 в 13:37 ILNUROFF

В интернете огромное количество разновидностей снега, с разными красивыми эффектами, но это снег (на мой взгляд) самый лучший и очень легкий (то есть не нагружает сайт) и полностью построенный на CSS3. Но самый главный плюс в том, что это снег можно использовать по разному, хоть на всю страницу сайта, хоть украсить им отдельный элемент дизайна (на пример: я украсил шапку своего сайта), вообщем, пользуйтесь на здоровье и украшаете свой сайт на новый год)

Принцип работы и установка:
Сначала нужно объяснить принцип, но не будем вдаваться в такие подробности, как создавать анимацию на CSS3, это вовсе не урок. Изначально это был блок со снегопадом фиксированной ширины, но это не целесообразно.

Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top, внутри него поместим HTML-код снегопада (он ниже), т.е. между

Код

<div class="top"> содержимое, где будет падать снег </div>

Принцип работы снегопада CSS3:
Чтобы снег был именно в этом блоке, нужно к блоку .top прописать position:relative, вот так:

Код

.top {position: relative;}

Непосредственно установка:

Для начала загрузим папку "snow" в корень вашего сайта.
Потом займемся установкой CSS стилей и активацией анимации. Для этого мы вставим следующий код в нашу таблицу стилей. Еще обратите внимание, рекомендуется сохранить картинки снега к себе на сайт, чтобы потом не возникало проблем с их загрузкой.

Код

.snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
#snow {width: 100%; height: 100%; background-image: url("/snow/1.png"), url("/snow/2.png"), url("/snow/3.png"); -webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}
@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
.snowContainer {-webkit-pointer-events: none; pointer-events: none;}

Поскольку снегопад на CSS3 представляет собой несколько слоев, которые просто ложатся на блок, может случиться ситуация, при которой элементы в самом блоке не смогут выполнять функции. Если такое случилось, поэксперементируйте с z-index.

Мне нравится4 Скачать14.7 Kbзагрузок: 1