Эффект пульсирующей иконки для сайта на CSS3 RUDEBOXВы когда нибудь замечали замечательную анимацию иконки в музыкальном сервисе Shazam? или схожий эффект в голосовом помощнике от разработчиков из Купертино — Siri? если нет, тогда мы сегодня Вам покажем примерную реализацию такого эффекта, только для иконки на сайте. Идея состоит в том, что у нас есть иконка, для примера мы взяли иконку сообщения, которая будет по умолчанию ничем не примечательная, но если приглядеться, то она начнет пульсировать, как будто волны будут отходить от ее краев, что оживит ее и привлечет взор.

 

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

Шаг 1. HTML

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

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

Эффект пульсирующей иконки для сайта на CSS RUDEBOX

Шаг 2. CSS

Так как у нас вся реализация пульса построена на СSS правилах, то нам необходимо задать все параметры именно здесь, для начала мы подключаем иконку:

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

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

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

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

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