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

 

Если вы хотите использовать уже готовый шаблон тогда обратите внимание на предложения от наших партнеров, там есть бесплатные и премиальные шаблоны, а также много полезной графики и плагинов.

Эффект тумана на сайте при помощи CSS3

Шаг 1. HTML

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

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

Эффект тумана на сайте при помощи CSS3

Шаг 2. СSS

Вся работа данной конструкции будет сосредоточена именно на CSS, по этому давайте поэтапно разберемся, как все это реализовано:

Для начала устанавливаем абсолютную позицию контейнера, и с изображением которое у нас будет в фиксированной позиции, затем добавляем параметры для контейнера тумана:

Последним шагом будет установка изображений тумана, а также их анимация с эффектом движения, выглядит это следующим образом:

На самом деле реализация эффекта достаточно простая, но это не значит, что он не интересен, думаю такой эффект найдет своего мастера. А как такой эффект Вам друзья?

Вот и все. Готово!