Как сделать мигающий текст?

Раньше для мигания текста применялся специальный элемент <blink>, но браузеры уже его не поддерживают и считают устаревшим. Теперь для тех же целей используется свойство animation, позволяющее плавно изменять значения стилевых свойств за указанное время.

Для создания мигания создадим класс blink и для него установим бесконечно повторяющуюся анимацию через параметр infinite. Само мигание происходит через свойство opacity, за счёт изменения прозрачности текста от 1 до 0, как показано в примере 1.

Пример 1. Мигающий текст

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мигание</title> <style> .blink { animation: blink 2s infinite; /* Параметры анимации */ } @keyframes blink { from { opacity: 1; /* Непрозрачный текст */ } to { opacity: 0; /* Прозрачный текст */ } } </style> </head> <body> <p class="blink">Внимание</p> </body> </html>

Здесь время мигания установлено две секунды, это значение можно увеличивать или уменьшать по своему усмотрению.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 21.09.2018
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты