» »

Эффект анимации тумана на сайте в CSS

Эффект анимации тумана на сайте в CSS

Вашему вниманию оригинальный эффект растворяющегося в тумане на фоне изображение, который устанавливаем на сайте или на отдельную страницу. Все это делается при помощи стилистике CSS, где выставлено изображение тумана в формате PNG в двух форматах. И ним задают скорость, где посменно идет один за одним формат, что после этого получается красивый туман. Который можно использовать на данных картинках в темном оттенке, это может быть как ночь или раннее утро.

Иногда веб мастеру нужно оригинально оформить интернет сайт или вновь созданную страницу, чтоб украсить его своеобразным элементом. Где даже такой эффект можно применить на слайдере, что безусловно смотреться будет уникально от других, но главное не искажая картинку. Некоторые делают в таком направление падение снега, в нашем случай будет идти туман.

Так смотрится на изображение, где ниже предоставлена ссылка на demo страницу.

Анимированный фон CSS с эффектом тумана

Приступаем к установке:

HTML

Код
<section class="sanecludeb">
<h1>ZORNET.RU</h1>
<figure class="santempa-ignseclude"></figure>
<div class="bavebenag-duscusanedelo">
<div class="bamportanenag-img bamportanenag-img-bagin"></div>
<div class="bamportanenag-img bamportanenag-img-gedan"></div></div>
</section>

CSS

Код
h1 {
font-family: 'Lato';
font-size: 156px;
font-weight: 100;
color: #fff;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.sanecludeb {
position: relative;
height: 100vh;
width: 100%;
background-image: url(http://zornet.ru/ABVUN/Anisa/67546758.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}

.bamportanenag-img { position: absolute; height: 100vh; width: 300vw; }

.bamportanenag-img-bagin {
background: url(http://zornet.ru/ABVUN/Anisa/fog-1.png) repeat-x;
background-size: contain;
background-position: center;
animation: marquee 60s linear infinite;
}

.bamportanenag-img-gedan {
background: url(http://zornet.ru/ABVUN/Anisa/fog-2.png) repeat-x;
background-size: contain;
background-position: center;
animation: marquee 40s linear infinite;
}

@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-200vw, 0, 0); }
}

Сама идея не новая, но к тематическим сайтам подойдет, ведь светлая облако тумана пролетая над изображением создает анимационный фон дыма, что изначально продвигается с правой стороны на левую, и после этого создается необычным трюк с запоминающем наполнением материала.

Демонстрация
2019-02-02 Загрузок: 1 Просмотров: 401 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar