• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимация падающего снега на фоне сайта (Создаем эффект падающего снега на странице при CSS3)
Анимация падающего снега на фоне сайта
Kosten
Дата: Понедельник, 2018-12-10, 21:43 | Сообщение 1
Администраторы
Сообщений:21563
Награды: 56


Это белоснежный фон с изображением, где идет светлая палитра синим оттенком, и вот на нем идет или кружатся снежинки, что смотрится просто великолепно. Где можно поставить на основные страницы на сайте, так как все исполнено на стилистике 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
Дата: Вторник, 2018-12-11, 02:34 | Сообщение 2
Vip
Сообщений:538
Награды: 14


Цитата Kosten ()
.notunsig-markup h2:after,

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


лишнее в стилях
Страна: (RU)
Kosten
Дата: Вторник, 2018-12-11, 03:32 | Сообщение 3
Администраторы
Сообщений:21563
Награды: 56


waak, благодарю, по сути так должно.

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