Пример:
Туман:
Или можно скачать коллекцию профессиональных бесплатных оверлеев реалистичного тумана для Фотошопа, чтобы выбрать туманы на свой вкус.
HTML:
|
1 |
<div class="fog"><div></div></div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.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; }Заранее спасибо!
чтобы не рос скролбар
а чтобы вправо, не -100, а 100 🙂
Спасибо большое! Попробуемс)