Старый и неправильный вариант
Итак, раньше мигание тексту можно было задать с помощью свойства:
Text-decoration: blink;
Однако IE не поддерживает это свойство. К тому же, оно ужасно работает и в современных браузерах. Но самая большая проблема этого способа в том, что вы никак не можете настроить мигание, выбрать цвета, периодичность и т.д. Сейчас мы рассмотрим способ, который все это учитывает и позволяет очень гибко настроить мигание.
Делаем с помощью анимации
Мы будем использовать анимацию, для этого нужно создать набор кадров, описывающих эффект, после чего применить его к нужному элементу. Подробно об анимации я напишу в будущем, сегодня же я просто покажу вам прием. Итак, сделаем так, чтобы у текста менялся цвет и это происходило постоянно. Создадим набор кадров:
@keyframes blink{
from{color: #fff;}
to{color: green;}}
Этот код пишется в css файле в произвольном месте. Он означает следующее: в начале анимации (ключевое слово from), цвет текста будет белым, а в конце – зеленым. Теперь кадры созданы и нужно связать их с текстом. Допустим, в нашем html-коде есть такой кусок:
<div class = "blink">Мигающий текст</div>
Блоку заданы какие-то базовые свойства, но суть не в них. Чтобы связать кадры с элементом нужно написать следующее:
animation-name: blink;
animation-duration: 1s;
Это два обязательных свойства, чтобы анимация работала. Как вы помните, мы назвали наш keyframes – blink, поэтому именно это значение вписано в имя. Duration это время выполнения всей анимации. Чем меньше оно, тем быстрее будет выполняться. Соответственно, если поставить 0,2 секунды, то мигание будет очень быстрым и резким.
Теперь если вы обновите страницу, то анимация выполнится, но только один раз, а нам ведь нужно мигание. Чтобы его реализовать, нужно сделать бесконечное повторение анимации. Для этого добавляем такой код:
animation-iteration-count: infinite;
Это свойство отвечает за количество повторений анимации. Тут можно задать числовое значение, но infinite устанавливает бесконечный повтор. Итак, мы реализовали мигание. Как это выглядит, можете посмотреть прямо здесь:
Если вам нужно переливание нескольких цветов, можно просто изменить кадры:
@keyframes blink{
33%{color: #fff}
66%{color: #ccc;}
100%{color: #000;}
}
Теперь цвет текста будет сначала белым, потом серым, в конце – черным. Вы можете добавлять любые другие эффекты к тексту, подчеркивание, изменение начертания, тени и т.д. Если вы хотите сделать все свойства анимации доступными в более старых версиях браузеров, нужно продублировать их с префиксом -webkit.
Итак, на этом я закончу свое повествование о том, как сделать мигающий текст в html и css. Как видите, ничего сложного. Если у вас есть какие-то вопросы, буду рад ответить в комментариях.
Круто, что сегодня это можно делать на чистом css