Здесь мы разбираем CSS анимацию — мерцание.
Это статья из цикла заметок по CSS анимации и эффектам.
Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, иконкам или акцентным элементам. Динамика добавляется за счет изменения параметров свечения, и это выглядит как мерцание.
Суть анимации
Эффект достигается за счёт свойства box-shadow, которое плавно меняется во времени с помощью анимации @keyframes.
Демонстрация эффекта.
Разбираем HTML / CSS
|
1 |
<button class="glow-button">Нажми меня</button> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.glow-button { background-color: #222; color: white; padding: 1em 2em; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; animation: css-animation-glow 1.5s ease-in-out infinite alternate; } @keyframes css-animation-glow { 0% { box-shadow: 0 0 5px #00f7ff; } 100% { box-shadow: 0 0 20px #00f7ff, 0 0 30px #00f7ff; } } |
Пояснение работы
box-shadowсоздаёт мягкое свечение, которое плавно усиливается.alternateвanimationзаставляет анимацию двигаться туда-обратно — сначала усиливает свечение, затем ослабляет.- Цвет свечения можно настроить под стиль сайта (
#00f7ff— неоново-голубой в примере). - Анимация бесконечная, благодаря
infinite, и плавная — за счётease-in-out.
Возможные вариации
Можно активировать эффект только при наведении::
|
1 2 3 4 5 6 7 |
.glow-button { transition: box-shadow 0.3s ease; } .glow-button:hover { animation: glow 1.5s ease-in-out infinite alternate; } |