Сегодня я вам покажу как сделать пульсирующую кнопку для звонка. Кнопка будет закреплена в правом нижнем углу и при нажатии будет выбираться приложение для звонка.
HTML
<a class="mobil_call_but">
<img src="https://prog-time.ru/wp-content/uploads/2019/11/phone.png"/>
</a>
CSS
Пульсация достигается за счёт изменения тени для блока. Мы создаем анимацию с помощью @keyframes
.
.mobil_call_but {
display: block;
position: fixed;
bottom: 20px;
right: 15px;
z-index: 999;
width: 90px;
height: 90px;
animation: radial-pulse 1s infinite;
border-radius: 50%;
}
/*создаем анимацию пульсации*/
@keyframes radial-pulse {
0% {
box-shadow: 0 0 0 0px rgba(116, 228, 116, 0.5);
}
100% {
box-shadow: 0 0 0 40px rgba(207, 241, 207, 0);
}
}