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

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

Шаг 1. HTML

Как и всегда, в первом шаге мы рассмотрим построение разметки, нам необходимо создать четыре каркаса с изображением и текстом,  все каркасы будут помещены в середину контейнера.

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

Простой эффект анимации для сайта на CSS3 RUDEBOX

Шаг 2. CSS

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

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

Все достаточно просто, полую работу анимации можно просмотреть в демонстрации.

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

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

Читайте также: