Скачать снег с помощью CSS3 анимации для uCoz бесплатно без регистрации с нашего сайта!
Установка:
1. Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top, внутри него поместим HTML-код снегопада:
2. Чтобы снег был именно в этом блоке, нужно к блоку .top прописать position:relative, вот так:
3. Для начала займемся установкой CSS стилей и активацией анимации. Для этого мы вставим следующий код в нашу таблицу стилей. Еще обратите внимание, рекомендуется сохранить картинки снега к себе на сайт, чтобы потом не возникало проблем с их загрузкой.
4. И далее вставим небольшой HTML код снегопада. Выберите именно тот блок, в котором должен идти снег.
Поскольку снегопад на CSS3 представляет собой несколько слоев, которые просто ложатся на блок, может случиться ситуация, при которой элементы в самом блоке не смогут выполнять функции. Если такое случилось, по-экспериментируйте с z-index.
Установка:
1. Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top, внутри него поместим HTML-код снегопада:
Код
<div class="top"> содержимое, где будет падать снег </div>
2. Чтобы снег был именно в этом блоке, нужно к блоку .top прописать position:relative, вот так:
Код
.top {position: relative;}
3. Для начала займемся установкой CSS стилей и активацией анимации. Для этого мы вставим следующий код в нашу таблицу стилей. Еще обратите внимание, рекомендуется сохранить картинки снега к себе на сайт, чтобы потом не возникало проблем с их загрузкой.
Код
.snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
#snow {width: 100%; height: 100%; background-image: url("http://rip-x.ru/snow/snow.png"), url("http://rip-x.ru/snow/snow_b.png"), url("http://rip-x.ru/snow/snow_c.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;}
#snow {width: 100%; height: 100%; background-image: url("http://rip-x.ru/snow/snow.png"), url("http://rip-x.ru/snow/snow_b.png"), url("http://rip-x.ru/snow/snow_c.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;}
4. И далее вставим небольшой HTML код снегопада. Выберите именно тот блок, в котором должен идти снег.
Код
<div class="snowContainer">
<div id="snow"></div>
</div>
<div id="snow"></div>
</div>
Поскольку снегопад на CSS3 представляет собой несколько слоев, которые просто ложатся на блок, может случиться ситуация, при которой элементы в самом блоке не смогут выполнять функции. Если такое случилось, по-экспериментируйте с z-index.
Всего 0 комментарий и 497 просмотров
Для того что бы добавить комментарии вам нужно войти либо зарегистрироваться.
Чат Rip-X
Все новости
Новости Rip-X
25.10.2015
Сделаны смайлы в чате.
25.10.2015
Сделана статистика форума «Rip-X»
1Пользователи онлайн
