ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект анимации тумана на сайте в CSS

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

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

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

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

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

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); }
}

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

Демонстрация

02 Февраля 2019 Загрузок: 4 Просмотров: 2762 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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