В этой статье рассмотрим, как можно сделать пульсирующий эффект кнопки, где будут в заданное время происходить эффект пульсации. Где основном вы могли видеть на сайте под функцию обратной связи, так как для этого и создается этот трюк.
Чтоб при открытие страницы гость или пользователь сайта изначально мог наблюдать, если что-то не понятно, то он может быстро написать. Теперь этот эффект в большинстве применяют на сайтах по тематике, как интернет магазин или сайт, который связан с услугами.
Так выглядит с установки:
Установка:
Нужно в HEAD подключить шрифтовые кнопки
Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
HTML
Код
<div class="pusatsiya">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
CSS
Код
.pusatsiya {
position: absolute;
top: 48%;
left: 48%;
transform: translate(-50%,-50%);
width: 80px;
height: 80px;
background: #58ca13;
color: #fffbfb;
border-radius: 50%;
text-align: center;
line-height: 84px;
font-size: 48px;
}
.pusatsiya:before,
.pusatsiya:after
{
content:'';
display:block;
position:absolute;
border:50%;
border:1px solid #58ea00;
left:-20px;
right:-20px;
top:-20px;
bottom:-20px;
border-radius:50%;
animation:animate 1.5s linear infinite;
opacity:0;
backface-visibility:hidden;
}
.pusatsiya:after{
animation-delay: .5s;
}
@keyframes animate{
0%
{transform:scale(0.5);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform: scale(1.2);
opacity:0;
}
}
Как видим не нужно не каких скриптов и библиотек, все на чистом стиле создается этот эффект пульсирующей кнопки.
Демонстрация
