Мигание курсора или другого элемента с помощью CSS

Мигание — простой и при этом заметный визуальный эффект. Чаще всего используется для имитации текстового курсора или привлечения внимания к какому-то элементу (например, «новинка», «онлайн», и т.д.).

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

Что будем делать

Сделаем мигающий курсор — вертикальную палочку, как в текстовом редакторе. Эффект мигания создаётся с помощью анимации, которая циклически меняет прозрачность (opacity).

Демка

Введите ваше имя:

Код на чистом CSS / HTML

Стили:

Как это работает:

  • display: inline-block; — позволяет задать размеры «курсора».
  • width и height — задают форму. Обычно это узкая вертикальная полоска высотой с текст.
  • background-color — цвет курсора.
  • animation: blink 1s step-start infinite; — включает бесконечную анимацию:
  • 1s — продолжительность одного цикла;
  • step-start — делает мигание более «цифровым» (без плавности);
  • infinite — зацикливает анимацию.
  • В @keyframes на середине (50%) анимации элемент становится прозрачным, а затем снова появляется.

Вариации:

  • Измените opacity на visibility: hidden; и visible — это предотвратит клики по «невидимому» элементу.
  • Используйте эффект мигания на иконках, значках, бейджах и т.п.
  • Можно комбинировать мигание с color или box-shadow для ещё большего привлечения внимания.

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

Плавное появление текста по буквам

Апрель 20, 2025 г.

Здесь мы разберем CSS анимацию - печатание слов по буквам. Это статья из цикла заметок по CSS анимации и эффектам. Это эффект, при котором текст появляется не весь сразу, а по одной букве, создавая ощущение "печати" или "набора текста". ...

Читать

CSS-анимация загрузки: простой спиннер без JavaScript

Май 2, 2025 г.

Анимации загрузки — это визуальные индикаторы, которые показывают пользователю, что система обрабатывает действие. Один из самых распространённых вариантов — спиннер, вращающийся круг. Это статья из цикла заметок по CSS анимации и эффектам. ...

Читать

Анимация нажатия: эффект нажатой кнопки

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Изменение цвета кнопки при наведении

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - изменение цвета при наведении (:hover). Это статья из цикла заметок по CSS анимации и эффектам. Одним из самых простых и эффективных способов оживить интерфейс — сделать так, чтобы кнопка меняла цвет, когда ...

Читать
 

Комментарии к «Мигание курсора или другого элемента с помощью CSS»

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



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