Анимированная подсветка рамки без JavaScript!

Обычные анимации рамки часто выглядят слишком примитивно: у элемента просто меняется цвет или прозрачность всей границы сразу. Но через conic-gradient можно создать полноценное вращающееся свечение вокруг элемента.

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

• conic-gradient рисует сектор света вокруг центра;

• псевдоэлемент становится отдельным glow-слоем;

• animation вращает только градиент;

• layout остаётся полностью стабильным, потому что анимируется compositing-слой.

Приём отлично подходит для интерфейсных панелей, акцентных кнопок и интерфейсов с акцентными состояниями.

Code Ready | #фишка