Изображения тумана в природе сами по себе завораживающе прекрасны. А если оживить туман с помощью CSS, то это будет вишенкой на торте.
Хотите узнать как это сделать? Нет ничего проще. Смотрите.
Для реализации этого эффекта нам потребуются два изображения
1. Основная картинка природы в тумане.
2. Картинка тумана с прозрачным фоном.
Если с первым пунктом обычно проблем не возникает, то чтоб найти и скачать вторую, придётся основательно погуглить.
Нужно именно скачать, а не скопировать, так как при копировании прозрачный фон не сохраняется.
Проблем не возникнет у тех, кто хорошо знаком с фотошопом, а для остальных, в конце статьи, я, на всякий случай, оставлю ссылку на скачивание своей картинки.
Так как для создания непрерывного движения потребуется два одинаковых изображения, то картинку надо будет скачать дважды.
Итак, разметка: создаём блок для основного изображения и в нём два блока для картинок с туманом.
Код:
HTML
<div class="image-page"> <!--Блок основного изображения-->
<div class="fog-floating"></div> <!--Блок первой картинки с туманом-->
<div class="fog-floating1"></div> <!--Блок второй картинки с туманом-->
</div>
CSS
/*В данном примере показан вариант подключения фоновых изображений в CMS WordPress. Изображения загружаются в библиотеку Медиафайлы, а затем их ссылка вставляется в значение свойства background*/
.image-page {
position: relative;
height: 50vh;
width: 150%;
background: url(https://starper55plys.ru/wp-content/uploads/2019/10/1bc.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.fog-floating,
.fog-floating1 {
position: absolute;
height: 50vh;
width: 300vw;
}
.fog-floating {
background: url(https://starper55plys.ru/wp-content/uploads/2019/10/1.png) repeat-x;
animation: fog 160s linear infinite;
}
.fog-floating1 {
background: url(https://starper55plys.ru/wp-content/uploads/2019/10/1(1).png) repeat-x;
animation: fog 240s linear infinite;
}
@keyframes fog {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-200vw, 0, 0); }
}
HTML вставляете на страницу, а CSS в файл style.css., или весь код в файл functions.php, а на страницу шорткод.
Вот и всё. Картинка с плывущим туманом украсит ваш сайт.
Желаю творческих успехов.