Снег с эффектом анимации HTML + CSS3
 | |
| Вероятно кто-то захочет увидеть на сайте имитацию падающего снега, где для этого создан скрипт, что остается его установить на своем веб-сайте. Главным плюсом приложений, которые в своей основе идут в анимационном виде, это безусловно, чтоб все выглядело реально. Что здесь можно с уверенностью сказать, что снег, который будет на страницах сайта, станет преподносить красивый вид реального снегопада. По сути здесь скрипта нет, так как он не задействует различных дополнений, виде JavaScript или JQuery, а все создано на чистом стиле CSS, где к стилистике закреплена анимация. И здесь скриптом назвать не как нельзя, но разве только из-за выстроенного сценария, что будет производить анимация. Но и есть как свои плюсы, но и свои минусы, что к минусам отведу, это использование 3 изображение на фигуры снега. Возможно вы хотите, чтоб снег только был в блоке, как вверх сайта, что основном предоставляют, а не на всем сайте. И давайте рассмотрим на примере, где блок идет с классом .top, внутри него поместим HTML-код снегопада.  Точнее между: Код <div class="top"> и </div> Для полного закрепление в блоке, то здесь нужно к блоку .top прописать position:relative, где ниже предоставлен элемент стиля. Код .top {position: relative;} На этом познавательный мануал завершается. Установочный процесс: CSS Код .snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;} #snow {width: 100%; height: 100%; background-image: url("http://zornet.ru/ABVUN/Aba/detunis/snegopad.png"), url("http://zornet.ru/ABVUN/Aba/detunis/padayushchiy-sneg.png"), url("http://zornet.ru/ABVUN/Aba/detunis/snezhinki.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;}} HTML идет по месту, где хотите наблюдать снегопад: Код <div class="snowContainer"> <div id="snow"></div> </div> Так как сама анимация снега идет на CSS3, где представляет собой сразу несколько слоев, где не сложно прописываются в блок, то возможно произойти ситуация, при которой элементы, которые находятся в блоке не смогут функционировать Возможно вы хотите, чтоб снег только был в блоке, как вверх сайта, что основном предоставляют, а не на всем сайте. И давайте рассмотрим на примере, где блок идет с классом .top, внутри него поместим HTML-код снегопада. И если вдруг такое случится, то здесь нужно поэкспериментировать с z-index. Источник: Yraaa.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |