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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.
Комментариев: 1
  1. Мозг

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

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