Пульсация (мерцание) текста в CSS

Обновлено: 23 декабря, 2021

Для создания эффекта мерцания текста, например номера телефона необходимо прописать стиль:

@keyframes pulsate{50%{color:#fff;text-shadow:0 -1px rgba(0,0,0,.3),0 0 5px #f03000,0 0 8px #f80000;}
}
#tel {
    color: rgb(245,245,245);
    text-shadow: 0 -1px rgba(0,0,0,.1);
    font-size: 32px;
    font-weight: 600;
    text-decoration: none;
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}

а затем, при выводе текста, использовать соответствующий класс:

<a href="tel:+7 (495) 201-38-54" id="tel">+7 (495) 111-11-11</a>

Пример данной реализации:

+7 (495) 111-11-11

Рейтинг автора
Автор статьи
Юрий
SEO-аналитик, программист (PHP, Ajax, Delphi, MySQL).
Написано статей
268
7 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 5 (7 оценок, среднее: 5,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Понравилась статья? Поделиться с друзьями:
Блог Программиста
Добавить комментарий

5 × один =