Интересная анимация магазина с помощью CSS3 | RUDEBOXПродолжаем рассматривать различные анимации которые меня заинтересовали, в данном посте мы посмотрим вариант реализации интересной анимации для магазина. Такое решение отлично подойдет для заглушки сайта или для организации фона. Основная идея состоит в том, что элементы в анимации появляются постепенно с плавной анимацией, то есть магазин разворачивается постепенно при этом нет никаких тормозов и подвисаний, в связи использовании только правил css и полного отсутствия изображений, что значительно упрощает работу с анимацией и придает ей гибкости.

 

При перезагрузке страницы анимация будет повторяться. И так, давайте приступим.

Шаг 1. HTML

Для начала мы создадим простую разметку, с подключением всех элементов.

С разметкой трудностей возникнуть не должно, теперь давайте перейдем к следующему шагу.

Интересная анимация магазина с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Для начала нам необходимо определить несколько общих правил:

Далее установим параметры для тучек и их небольшой анимации:

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

Затем сам магазин:

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.