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

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

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

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

Создание рамки

Сначала мы создадим CSS рамки вокруг текста. Для этого мы используем пунктирный контур и свойство box-shadow:

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    ...
 }

Для outline нужно будет задать width, type и color. Для box-shadow нужно задать только значение свойства spread, которое должно быть таким же, как width и color для outline. Вместе outline и box-shadow создадут эффект двухцветного пунктира.

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

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

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

@keyframes animateBorder {
  to {
    outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
  }
}

Цвет контура можно указать с помощью полного варианта свойства outline-color, в то время как для тени нужно задать значения в сокращённом формате свойства.

После того, как анимация будет готова, добавьте ее к блоку:

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    animation: 1s animateBorder infinite;
    ...
}

Посмотреть демо

Переходы для рамок

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

.photos{
    outline: 20px dashed #006DB5;
    box-shadow: 0px 0px 0px 20px #3CFDD3;
    transition: all 1s;
    ...
}

.photos:hover{
    outline-color: #3CFDD3;
    box-shadow: 0 0 0 20px #006DB5;
}

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

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

Пожалуйста, опубликуйте свои отзывы по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!