Как сделать пульсирующую кнопку телефона

Сегодня я вам покажу как сделать пульсирующую кнопку для звонка. Кнопка будет закреплена в правом нижнем углу и при нажатии будет выбираться приложение для звонка.

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);
  }
}
0 0 голос
Рейтинг статьи
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии