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


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

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

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

 

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

Шаг 1. HTML

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

<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="icon"></div>

 

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

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

Шаг 2. CSS

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

.icon{
 position: absolute;
 width: 180px;
 height: 180px;
 background: url(../img/279581_msg2.png) no-repeat;
 background-size: 180px 180px;
 margin: auto;
 top: 0; left: 0; bottom: 0; right: 0;
 z-index: 3;
 -webkit-box-shadow:
 0 0 0 10px rgba(255,255,255,.2),
 0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);
 -moz-box-shadow:
 0 0 0 10px rgba(255,255,255,.2),
 0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);
 box-shadow:
 0 0 0 10px rgba(255,255,255,.2),
 0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}]/php]
Мы указываем ее размеры, также для кроссбраузерности мы добавим различные варианты заливки дополнительного слоя рамки, для правильного отображения. 
Так как у нас будет два кольца пульсации нам необходимо для каждого задать свои параметры, первый будет по умолчанию, начинать анимацию:
1.pulse1 {
 position: absolute;
 width: 200px;
 height: 200px;
 margin: auto;
 top: 0; left: 0; bottom: 0; right: 0;
 z-index: 1;
 opacity: 0;
 border: 3px solid rgba(255,255,255,.1);
 -webkit-animation: pulsejg1 4s linear infinite;
 -moz-animation: pulsejg1 4s linear infinite;
 animation: pulsejg1 4s linear infinite;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
 -webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
 -moz-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
 box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

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

.pulse2 {
position: absolute;
width: 200px;
height: 200px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 2;
opacity: 0;
border: 1px solid rgba(255,255,255,0);
-webkit-animation: pulsejg2 4s linear infinite;
-moz-animation: pulsejg2 4s linear infinite;
animation: pulsejg2 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

 

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

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

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

Previous Модуль оплаты "Интеркасса" для MaxyStore и OpenCart v.1.5.3.1
Next Знаменитая игра Duck Hunt с помощью CSS3

Suggested Posts

Как установить тему на блог WordPress

Вывод из под агс молодых сайтов

Модуль вывода атрибутов для товара группами

Модуль Действующие акции

Самые классные JQuery плагины за последние месяца

Знаменитая игра Duck Hunt с помощью CSS3