Как анимировать пунктирную границу с помощью CSS

Декорированные границы могут украшать любой элемент на странице, но границы CSS ограничены, когда дело касается стиля. Разработчики часто предлагают такие решения, как границы CSS-градиента, границы SVG, несколько границ и многое другое, чтобы имитировать и улучшать внешний вид границ блока и его анимации..

Сегодня мы рассмотрим простой способ взлома пунктирных границ: анимация штриховых границ. Анимированная пунктирная рамка будет создана с использованием только контур а также коробчатого тень, не оставляя суеты по поводу запасных вариантов, так как контур поддерживается начиная с IE8. Таким образом, пользователь по-прежнему сможет видеть границы в отличие от использования SVG или градиента. При этом вы также можете создавать двухцветные тире. Давайте взглянем.

Создание границ

Сначала мы создадим границы. Для этого мы будем использовать пунктирный контур и теневую рамку.

 .баннеры контур: 6px пунктирная желтая; box-shadow: 0 0 0 6px # EA3556;… 

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

Затем вы можете отрегулировать ширину или высоту блока для желаемой границы взгляда на углы.

Анимация границ

Для нашего первого примера анимации мы добавим анимации ключевых кадров CSS к набору баннеров, границы которых непрерывно анимируются и привлекают внимание. Для эффекта анимации мы просто поменяем цвета контура и тени блока..

@keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 6px желтый; 

Вы можете настроить цвет контура, используя план-цвет свойство longhand, однако для тени box вам придется передать все значения свойства стенографии.

Как только анимация будет готова, добавьте ее в коробку.

.баннеры контур: 6px пунктирная желтая; box-shadow: 0 0 0 6px # EA3556; анимация: 1s animateBorder бесконечно;…

Переходы на границах

Для примера перехода мы добавим границы к изображениям и анимируем их при наведении. Вы также можете изменить размер границы для различных эффектов.

.фотографии контур: 20px пунктир # 006DB5; тень от рамки: 0px 0px 0px 20px # 3CFDD3; переход: все 1 с;… .фото: hover outline-color: # 3CFDD3; тень от рамки: 0 0 0 20px # 006DB5; 

Теперь наведите курсор на эти изображения, чтобы увидеть штриховые границы CSS во всей их анимационной красоте..

И это обертка. Вы можете попробовать заменить пунктирные границы пунктирными, но эффект может быть не таким хорошим. Вы также можете изменить тип контура во время анимации, чтобы добавить еще несколько эффектов.