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

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

16.10.2020
Содержание:

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

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

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Контакты для связи

Технология на prog-time
Telegram
https://t.me/prog_time_bot