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

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

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

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

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

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

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

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

Стили

Настройки

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

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

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

Написать комментарий

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

Эссе «добро вокруг меня» GTPChat от лица старца 100 лет

Май 1, 2023 г.

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

Читать

Относительные перемещения

Январь 7, 2021 г.

Эта группа команд позволяет прописать движение Джека относительно его текущего направления. В самом начале чертежник смотрит вправо, потому команда ВПЕРЕД заставит его начертить линию вправо. Чтобы изменить направление, используйте другую команду ...

Читать

 

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

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



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