• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Анимация падающего снега на фоне сайта (Создаем эффект падающего снега на странице при CSS3)
Анимация падающего снега на фоне сайта
Kosten
Понедельник, 10 Декабря 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Это белоснежный фон с изображением, где идет светлая палитра синим оттенком, и вот на нем идет или кружатся снежинки, что смотрится просто великолепно. Где можно поставить на основные страницы на сайте, так как все исполнено на стилистике CSS. Вам только останется выбрать то место, где хотите видеть такую картину, что ниже представлена.

Также есть много вариантов, где его применить. это как отдельные страницы, что возможно сделаны под разные функций. Также не исключаю, что можно его расположить в блоке, здесь главное размеры, но и безусловно та картинка, которые вы сами выберете или поставите, что идет по умолчанию в CSS.



HTML

Код
<div class="notunsig-markup"></div>


CSS

Код
body{
background-image:url(../snow-wallpaper-home.jpg);
background-size:cover;
background-position:center center;
margin:0;
padding:0;
}

.notunsig-markup{
position:absolute;
width:100%;
height:100%;
}

.notunsig-markup:after{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:transparent;
background-image:url(../snowa.png),url(../img/snow1b.png),url(../snow1a.png);
-webkit-animation:snow 4s linear infinite;
animation:snow 4s linear infinite;
z-index:1;
pointer-events:none}

@-webkit-keyframes snow{
0%{
background-position:0 0,0 0,0 0}

100%{
background-position:500px 1000px,250px 500px,300px 300px}

}

@keyframes snow{
0%{
background-position:0 0,0 0,0 0}

100%{
background-position:500px 1000px,250px 500px,300px 300px}

}

.notunsig-markup:after {
content: '';
}


Демонстрация
Прикрепления: 8660243.jpg (82.6 Kb) · stunvdarets.rar (320.6 Kb)
Страна: (RU)
waak
Вторник, 11 Декабря 2018 | Сообщение 2
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
Цитата Kosten ()
.notunsig-markup h2:after,

Цитата Kosten ()
, .snotunsig-markup li:before


лишнее в стилях
Страна: (RU)
Kosten
Вторник, 11 Декабря 2018 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
waak, благодарю, по сути так должно.

Код
.notunsig-markup:after {
content: '';
}
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Анимация падающего снега на фоне сайта (Создаем эффект падающего снега на странице при CSS3)
  • Страница 1 из 1
  • 1
Поиск: