Анимация свечения (мерцание)

Здесь мы разбираем CSS анимацию — мерцание.

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

Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, иконкам или акцентным элементам. Динамика добавляется за счет изменения параметров свечения, и это выглядит как мерцание.

Суть анимации

Эффект достигается за счёт свойства box-shadow, которое плавно меняется во времени с помощью анимации @keyframes.

Демонстрация эффекта.

Разбираем HTML / CSS

Стили:

Пояснение работы

  • box-shadow создаёт мягкое свечение, которое плавно усиливается.
  • alternate в animation заставляет анимацию двигаться туда-обратно — сначала усиливает свечение, затем ослабляет.
  • Цвет свечения можно настроить под стиль сайта (#00f7ff — неоново-голубой в примере).
  • Анимация бесконечная, благодаря infinite, и плавная — за счёт ease-in-out.

Возможные вариации

Можно активировать эффект только при наведении::

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

Плавающее движение вверх-вниз с помощью CSS

Май 1, 2025 г.

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

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

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

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать
 

Комментарии к «Анимация свечения (мерцание)»

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



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