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

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

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

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

Увидеть перо CSS граница – контур и рамки Прети (@rpsthecoder) на CodePen,

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

Затем вы можете отрегулировать ширину или высоту блока для желаемой границы взгляда на углы.
Анимация границ
Для нашего первого примера анимации мы добавим анимацию ключевых кадров CSS к набору баннеров, границы которых непрерывно анимируются и привлекают внимание. Для эффекта анимации мы просто поменяем цвета контура и тени блока.
@keyframes animateBorder {
  к {
    цвет контура: # EA3556;
    box-shadow: 0 0 0 6px желтый;
  }
}
Вы можете настроить цвет контура, используя свойство long-color outline-color, однако для тени box-а вам придется указать все значения для свойства стенографии.

Подробнее: CSS Shorthand vs. Longhand – Когда использовать который

Как только анимация будет готова, добавьте ее в коробку.
.banners {
    контур: пунктирная желтая 6px;
    box-shadow: 0 0 0 6px # EA3556;
    анимация: 1с animateBorder бесконечно;
    …
}
Увидеть перо CSS пунктирная граница анимации Прети (@rpsthecoder) на CodePen,
Переходы на границах
В качестве примера перехода мы добавим границы к изображениям и анимируем их при наведении. Вы также можете изменить размер границы для различных эффектов.
.фотографии{
    контур: 20px пунктир # 006DB5;
    тень от рамки: 0px 0px 0px 20px # 3CFDD3;
    переход: все 1с;
    …
}

.photos: парить {
    цвет контура: # 3CFDD3;
    тень от рамки: 0 0 0 20px # 006DB5;
}
Теперь наведите курсор на эти изображения, чтобы увидеть штриховые границы CSS во всей их анимационной красоте.

Увидеть перо CSS пунктирный переход границы Прети (@rpsthecoder) на CodePen,

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