Создаем падающий снег средствами CSS

Создаем падающий снег на CSS

Анимация — падающий снег

Сегодня мы поработаем дедами Морозами: нашлем циклон на зону повышенного внимания в браузере и покроем дивные блоки виртуальным снежком! Проще говоря: создадим падающий снег на CSS! И помогут нам в этом зимние колдовские материалы:

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

Материалы готовы, приступаем к 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, а это значит, что нас сегодня ждут хорошее настроение и успех в делах!

1 комментарий

  1. Большое спасибо! Жаль, что подробно не расписано

Добавить комментарий