Анимация мерцающего текста на CSS

Мерцающий текст (blinking text) — это текст, который периодически исчезает и появляется, создавая эффект мигания. Такой приём можно использовать для временных уведомлений, подчёркивания чего-то важного или стилизации ретро-дизайнов.

Это статья из цикла заметок по CSS анимации и эффектам.

Основная идея

Анимация создаётся с помощью @keyframes, где мы управляем opacity. Мы делаем текст полностью видимым, затем полностью прозрачным — и повторяем это в цикле.

Пример, того как это выглядит:

Внимание! Осталось 2 места!

Вот пример на чистом CSS / HTML

Стили

Настройки

  • Скорость: Изменяйте 1s в animation: blink 1s infinite на нужное значение (например, 0.5s для быстрого мигания или 2s — для медленного).
  • Поведение: Можно задать animation-direction: alternate; , если хотите чуть более плавный эффект.
  • Остановка: Добавьте класс с animation: none; чтобы отключить мерцание программно (например, через JavaScript).

UX-предупреждение

Слишком резкое или частое мерцание может раздражать пользователей или создавать дискомфорт (особенно при плохом освещении или эпилепсии). Используйте с осторожностью и по делу.

Мало букафф? Читайте есчо !

Ветвления и циклы чертежника

Январь 7, 2021 г.

Язык программирования не может обойтись без управляющих элементов вроде условий и циклов. Даже такой простой как 'чертежник Джек'. Условный оператор Эта конструкция использует ЕСЛИ - КОНЕЦ ЕСЛИ синтаксис, чтобы выполнить инструкции внутри неё, ...

Читать

Служебные команды чертежника

Март 6, 2025 г.

Две полезные команды, могут вам помочь в работе чертежника. Пауза между выполнением команд.Для анимации нужно время, и потому Джек делает паузу между командами - 1 секунду. Это время можно варьировать в диапазоне от 0.001 до 10 секунд. Для этого ...

Читать

Реализация формы поиска товаров

Май 11, 2023 г.

См. основной материал для введения. Форма в нашем случае не требует отправки/проверки данных, и реализует только два метода - getFormId и buildForm. Хотя форма и не содержит кнопки submit, но все равно будет реагировать на отправку данных, поэтому ...

Читать

Эссе «добро вокруг меня» GTPChat v4 исходный сокращенный вариант

Май 1, 2023 г.

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

Читать
 

Комментарии к «Анимация мерцающего текста на CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: