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

Раньше для мигания текста применялся специальный элемент <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>

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

Просмотров:

Добавить комментарий