Туман на картинке

Изображения тумана в природе сами по себе завораживающе прекрасны. А если оживить туман с помощью 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 основы. Добавьте в закладки постоянную ссылку.
А так же:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *