Сегодня мы поработаем дедами Морозами: нашлем циклон на зону повышенного внимания в браузере и покроем дивные блоки виртуальным снежком! Проще говоря: создадим падающий снег на CSS! И помогут нам в этом зимние колдовские материалы:
- Целых 3 png файла со снежинками. Снежинки наколдованы моим посохом, поэтому скачивайте без опасения нарушить авторские права: «snow1.png», «snow2.png», «snow3.png».
- Картинка заднего фона. Вы можете вставить картинку, которая вам нравится. Мои гномики нашли картинку Pixabay. У этой картинки я немного поменяла фон, получился такой снегирек: «fon.jpg»

Материалы готовы, приступаем к HTML-коду:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Анимация - падающий снег</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="snow-blocks">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html>
В html-файле мы создали блок snow-blocks, бэкграундом которого определим фоновую картинку со снегирем. А в блоке snow-blocks создали еще 2 блока для наших снежинок, в которых расположим 3 png файла со снежинками. Как мы это сделаем? Открывайте файл style.css, сейчас все станет понятно:
Определяем снежные стили:
Шаг№1: установим блоку snow-blocks резиновую фоновую картинку «fon.jpg», ширина которой не больше 1200px, высота картинки фиксированная — 600px:
.snow-blocks{
background: url(fon.jpg) no-repeat #0182c6;
position: relative;
height: 600px;
width: 100%;
max-width: 1200px;
overflow: hidden;
background-size:cover;
}
Шаг№2: установим для класса .snow1 в качестве фоновой картинки снег «snow1.png» и зададим линейно движущуюся анимацию с названием «snow1» на 18 секунд:
.snow1{
background-image: url(snow1.png);
position:absolute;
width: 100%;
height:600px;
animation: snow1 18s linear infinite;
}
Шаг№3: установим для класса .snow2 в качестве фоновых картинок изображения «snow2.png» и «snow3.png» и зададим линейно движущуюся анимацию с названием «snow2» на 10 секунд:
.snow2{
background-image: url(snow2.png),url(snow3.png);
animation: snow2 10s linear infinite;
width: 100%;
height:600px;
position:absolute;
}
Шаг №4: Определим характер анимаций snow1 и snow2. Для этого зададим начальные и конечные позиции движения фоновых изображений. Для крупных снежинок из файла «snow1.png» (анимация snow1) я задала плавную смену направления движения. Этим действом я стремилась создать эффект кружащихся бликов:
@keyframes snow2{
0%{background-position: 0 0, 0 0;}
100%{background-position: 10% 600px, 10% 600px;}
}
@keyframes snow1{
from{background-position: 0 -300px;}
20% {background-position: 20% -100px;}
40% {background-position: 30% 100px;}
to{background-position: 20% 700px;}
}
Шаг№5: сохраним, протестируем и улыбнемся, ведь только что мы отведали очередную порцию сладкого WebTorta, а это значит, что нас сегодня ждут хорошее настроение и успех в делах!
Большое спасибо! Жаль, что подробно не расписано