Движущийся туман на CSS

Пример:

Туман:

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

HTML:

<div class="fog"><div></div></div>

1	<div class="fog"><div></div></div>

CSS:

.fog {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	overflow: hidden;
	background: url("background.jpg") center center;  
	background-size: cover;
}
.fog::before,
.fog::after,
.fog div::before, 
.fog div::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: repeat-x;
}
.fog div::before, 
.fog div::after	{
	left: 100%;
}
.fog::before, 
.fog div::before {
	background-image: url("fog-1.png");
	animation: fogmove 20s linear 0s infinite;
}
.fog::after, 
.fog div::after {
	background-image: url("fog-2.png");
	animation: fogmove 10s linear 0s infinite;
}
@keyframes fogmove {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

.fog {

position: relative;

top: 0;

left: 0;

width: 100%;

height: 400px;

overflow: hidden;

background: url("background.jpg") center center;

background-size: cover;

}

.fog::before,

.fog::after,

.fog div::before,

.fog div::after {

content: "";

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

background-size: cover;

background-position: center;

background-repeat: repeat-x;

}

.fog div::before,

.fog div::after {

left: 100%;

}

.fog::before,

.fog div::before {

background-image: url("fog-1.png");

animation: fogmove 20s linear 0s infinite;

}

.fog::after,

.fog div::after {

background-image: url("fog-2.png");

animation: fogmove 10s linear 0s infinite;

}

@keyframes fogmove {

from {

transform: translate3d(0, 0, 0);

}

to {

transform: translate3d(-100%, 0, 0);

}

.fog { width:auto; height:200px; position: relative; background-image: url("../logo.png"), url("../header_wide.jpg"); background-position: left, center; background-repeat: no-repeat, no-repeat; background-size: auto, cover; }

Захар: 26.12.2019 в 23:57

Забыл сразу спросить, а как развернуть то туман, с другой стороны пустить? )

Ответить
Захар: 26.12.2019 в 23:30
Отличный урок!
А не могли бы подсказать, что я делаю не так? Решил сделать несколько бэкграундов у основной картинки, вроде заработало, но туман дублируется и постоянно растет полоска скролла горизонтальная.

Код модифицировал так, и оно отображается, и лого под туманом красиво. Но вот скроллбар растущий) и целая доп полоска тумана справа.
```
.fog {
	width:auto;
	height:200px;	
	position: relative;
	background-image:  url("../logo.png"), url("../header_wide.jpg"); 
	background-position: left, center;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, cover;
}
```
Заранее спасибо!
Ответить
- Alexander: 27.12.2019 в 08:08
  overflow: hidden;
  
  чтобы не рос скролбар
  
  а чтобы вправо, не -100, а 100 🙂
  Ответить
  - Захар: 27.12.2019 в 09:50
    
    Спасибо большое! Попробуемс)
    
    Ответить

Пример:

Туман:

HTML:

CSS:

Смотрите также:

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

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