Как создать на css мигающий текст

Здравствуйте, уважаемые читатели моего блога. Сегодня я вам расскажу, как сделать с помощью css мигающий текст. На самом деле это достаточно легко реализовать, сейчас я вам покажу правильный способ.

Старый и неправильный вариант

Итак, раньше мигание тексту можно было задать с помощью свойства:

text-decoration: blink;

Однако IE не поддерживает это свойство. К тому же, оно ужасно работает и в современных браузерах. Но самая большая проблема этого способа в том, что вы никак не можете настроить мигание, выбрать цвета, периодичность и т.д. Сейчас мы рассмотрим способ, который все это учитывает и позволяет очень гибко настроить мигание.

Делаем с помощью анимации

Мы будем использовать анимацию, для этого нужно создать набор кадров, описывающих эффект, после чего применить его к нужному элементу. Подробно об анимации я напишу в будущем, сегодня же я просто покажу вам прием. Итак, сделаем так, чтобы у текста менялся цвет и это происходило постоянно. Создадим набор кадров:

@keyframes blink{
    from{color: #fff;}
    to{color: green;}
}

Этот код пишется в css файле в произвольном месте. Он означает следующее: в начале анимации (ключевое слово from), цвет текста будет белым, а в конце – зеленым. Теперь кадры созданы и нужно связать их с текстом. Допустим, в нашем html-коде есть такой кусок:

<div class="blink">Мигающий текст</div>

Блоку заданы какие-то базовые свойства, но суть не в них. Чтобы связать кадры с элементом нужно написать следующее:

.blink{
    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. Как видите, ничего сложного.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий