1:12
Автор: Рубрика: CSS-рецепты Один комментарий

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

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

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

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

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 устанавливает бесконечный повтор. Итак, мы реализовали мигание. Как это выглядит, можете посмотреть прямо здесь:

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Если вам нужно переливание нескольких цветов, можно просто изменить кадры:

@keyframes blink{
33%{color: #fff}
66%{color: #ccc;}
100%{color: #000;}
}

Теперь цвет текста будет сначала белым, потом серым, в конце – черным. Вы можете добавлять любые другие эффекты к тексту, подчеркивание, изменение начертания, тени и т.д. Если вы хотите сделать все свойства анимации доступными в более старых версиях браузеров, нужно продублировать их с префиксом -webkit.

Итак, на этом я закончу свое повествование о том, как сделать мигающий текст в html и css. Как видите, ничего сложного. Если у вас есть какие-то вопросы, буду рад ответить в комментариях.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Один комментарий
  • Мозг

    Круто, что сегодня это можно делать на чистом css good

    2016-05-02 в 3:50 | Ответить