Анимированная градиентная рамка
Для создания красивой и анимированной градиентной рамки нам понадобится всего один контейнер без дополнительных обёрток и псевдоэлементов.
Зададим контейнеру .gradient-border базовые стили. Создадим CSS-переменную --bg-angle для будущего использования в градиенте.
Добавим рамку толщиной 8 пикселей вокруг элемента .gradient-border. Временно сделаем её белой и полупрозрачной, чтобы наглядно объяснить, как будет работать эффект.
Теперь добавим фоновую заливку с использованием конусного градиента, который использует переменную --bg-angle.
Ключевуюу роль играет свойство background-origin. Благодаря значению border-box наш градиент отрисовывается и под рамкой. Чтобы показать это, мы сделали её полупрозрачной.
Давайте изменим значение на padding-box. Градиент перестал отрисовываться под рамкой.
Значение content-box даёт ещё более наглядный результат. Теперь градиент отрисовывается только под областью содержимого.
Вернём на место border-box, это ключевое значение для работы нашего приёма.
Градиенты — это изображения, а фоновых изображений у блока может быть множество. Поэтому мы можем перекрыть часть конического градиента с помощью одноцветного линейного градиента.
Добавим линейный градиент первым изображением в списке, чтобы он перекрывал конический. И зададим линейному градиенту background-origin: padding-box.
Давайте для наглядности изменим background-origin у линейный градиента на content-box. Конический градиент теперь «просвечивает» не только в области рамки, но и в области паддингов.
Вернём padding-box линейному градиенту. И подведём небольшой итог.
Такого же эффекта мы можем добиться, если во внешний контейнер с градиентным фоном добавить внутренний контейнер со сплошным фоном. Трюк с несколькими градиентами и background-origin позволяет нам избавиться от дополнительной обёртки.
Теперь сделаем рамку полностью прозрачной.
И соберём код с градиентом в одном правило. Чтобы перейти к созданию анимации.
Добавим для .gradient-border анимацию spin на 2.5 секунды, которая повторяется бесконечно и равномерно.
Добавим @keyframes spin. В нем описано изменение пользовательской CSS-переменной --bg-angle до 360 градусов.
Эта простая анимация должна работать и красиво вращать градиент, но не работает из-за бага.
Попробуем изменить значение --bg-angle в анимации на 180 градусов.
Анимация работает, но она воспроизводится рывками, а не плавно.
Чтобы починить баг с анимацией, нужно добавить директиву @property, в которой подробнее описать тип пользовательской переменной --bg-angle. Подскажем браузеру, что --bg-angle — это угол <angle> и начальное значение у него 0deg.
Этой информации браузеру достаточно, чтобы «завести» и правильно показывать анимацию.
Осталось вернуть значение 360deg для анимации. Теперь градиент делает красивый полный оборот, а мы видим это как анимацию рамки.
Временно сделаем линейный градиент полупрозрачным, а рамку толще. Теперь принцип работы эффекта анимированной градиентной рамки максимально нагляден.
Вернём все параметры на место. И сделаем так, чтобы рамка анимировалась только при наведении. Добавляем animation-play-state: paused; для .gradient-border. Это приостановит анимацию.
Добавим animation-play-state: running; при наведении на .gradient-border, чтобы анимация продолжила воспроизведение.
Наведите курсор на карточку и проверьте работу анимации.
Соберём код в итоговое состояние. Эффект анимированной градиентной рамки готов. Экспериментируйте с ним и делитесь результатами с нами и друзьями.
