Оригинальный hover-эффект иконки в стиле AppleПрогресс не стоит на месте, это относится также к веб-дизайну, недавно мы наблюдали презентацию крупного обновления для mac os, где мы получили множество интересных вкусняшек и эффектов. В данном уроке мы рассмотрим как создать один из таких эффектов, а именно эффект при наведении на иконку. Чтобы получить данный hover-эффект иконки в стиле Apple нам необходимо немного усилий и заранее подготовленные иллюстрации, которые нам помогут в создании данного эффекта. И так, давайте посмотрим, что у нас с этого получилось.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

К примеру мы взяли одну иконку, и создали целевую страницу, благодаря которой наша иконка выглядит еще привлекательней, давайте посмотрим как все это реализовать.

Шаг 1. HTML

У нас будет общий блок, в котором будет содержаться два ранее заготовленных изображения, кроме этого для каждого мы присваиваем отдельный ID и класс.

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

Оригинальный hover-эффект иконки в стиле Apple_mini

Шаг 2. CSS

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

В результате мы получаем замечательный эффект для кнопки, который наверняка не оставит равнодушным Ваших посетителей.

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

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