Фантастическая анимация границ в CSS

Сегодня я посетил блог сайта — shoptalkshow, и мне было очень интересно увидеть такой стиль:

Я считаю его стиль уникальным, особенно некоторые обводки.

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

Свойство CSS Border

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

В дополнение к наиболее распространенным сплошной, пунктирной, CSS border также поддерживает стили none, hidden, dotted, double, groove, ridge, inset и outsetother. Уберите none, hidden, чтобы увидеть все поддерживаемые стили границ:

Это основы. Если вы хотите реализовать границу других стилей, или добавить анимацию к границе, вам нужно сотрудничать с некоторыми другими свойствами, или открыть свой разум. Итак, давайте посмотрим на некоторые дополнительные интересные границы.

Изменение длины границы

Давайте начнем с более простого, чтобы добиться такого эффекта границы, как здесь:

На самом деле это два псевдоэлемента, которые заимствуют элементы. Задаются соответственно только верхняя и левая границы, нижняя и правая границы двух псевдоэлементов, hover и высота и ширина двух псевдоэлементов могут быть изменены при передаче . Очень легко понять.

div {
    position: relative;
    border: 1px solid #03A9F3;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }

    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }

    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }

    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}

CodePen Demo — анимация границы ширины

Далее начнется углубление сложности.

Анимация пунктирных границ

Используя ключевое слово dashed, вы можете легко создавать пунктирные границы.

div {
    border: 1px dashed #333;
}

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

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

Посмотрите, пунктирные линии, смоделированные с помощью градиентов, выглядят следующим образом:

Градиент поддерживает несколько градиентов. Мы можем использовать градиенты для представления всех четырех сторон контейнера:

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

Эффект выглядит следующим образом:

Хорошо, на данный момент наша анимация пунктирной границы фактически уже готова. Хотя border-style: dashed не поддерживает анимацию, но градиент поддерживает. Давайте добавим эффект hover к вышеуказанному div, и добавим анимацию animation, когда мы hover, изменяя background-position элемента.

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

ОК, посмотрите на эффект, наведите на время, граница может двигаться, потому что вся анимация является первый и последний связаны, бесконечный цикл анимации выглядит как пунктирная граница в движении все время, это небольшая повязка или небольшой трюк:.

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

div {
    border: 1px solid #333;

    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

Из-за разницы в положении границы и фона на модели коробки будет наблюдаться очевидное визуальное несоответствие:

Чтобы решить эту проблему, мы можем заменить border на outline, потому что outline может установить outline-offset. Это прекрасно решает проблему.

div {
    outline: 1px solid #333;
    outline-offset: -1px;

    &:hover {
        outline: none;
    }
}

Наконец, посмотрите на эффект, примененный к фактической кнопке:

Полный код приведенной выше демонстрации выглядит следующим образом:

CodePen Demo — анимация пунктирной границы

Другие интересные способы использования градиентов

С помощью градиентов можно добиться не только вышеперечисленных эффектов.

Мы продолжаем углубляться в градиент и использовать его для достижения такого фона:

div {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}

Обратите внимание, что здесь используется графика, созданная псевдоэлементом, а ширина и высота родительского элемента 200% такие же, как у родительского элемента overflow: hidden.

Далее добавьте к нему вращение:

div {
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

Посмотрите на эффект:

Наконец, используйте псевдоэлемент для маскировки середины, и получится красивая анимация границы (в анимации будут появляться полупрозрачные элементы для облегчения понимания принципа):

Полный код приведенной выше демонстрации выглядит следующим образом. Впервые я увидел этот эффект у этого автора — Jesse B

CodePen Demo — анимация градиентной границы

Изменение цвета градиента

После освоения вышеуказанных базовых навыков, мы можем внести некоторые коррективы в цвета градиента, мы превратим 4 цвета в 1 цвет:

div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(#399953, #399953);
}

Получите вот такой график:

Снова дайте им покрутиться вместе, и получится одноцветная анимация преследующей границы:

CodePen Demo — анимация градиентной границы 2

Ух ты, очень красивый вид. Однако, если это одна линия, есть очевидный недостаток, то есть конец границы — маленький треугольник вместо вертикального, что может быть неприменимо в некоторых сценариях или PM не может принять это.

Есть ли способ избавиться от этих маленьких треугольников? Да, ниже мы представим другой метод использования clip-path и устранения этих маленьких треугольников.

Разумное использование конического градиента

Прежде чем представить clip-path, давайте поговорим об угловых градиентах.

Линейный градиент — это основной градиент, использованный выше. Мы можем добиться точно такого же эффекта с помощью углового градиента conic-gradient.

Давайте попробуем использовать conic-gradient для достижения того же эффекта, на этот раз в более темном стиле. Основной код выглядит следующим образом.

.conic {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation: rotate 4s linear infinite;
    }
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

Рендеринг и схематические диаграммы выглядят следующим образом. Поверните график с частичным угловым градиентом и используйте другой псевдоэлемент для маскировки средней части, чтобы просочилась только часть линии:

CodePen Demo — Вращающаяся граница 3

Умное использование clip-path

Это снова старый друг clip-path, и интересные вещи никогда не пропадут.

clip-path можно анимировать саму точку координат, трансформируя ее из одной обтравочной фигуры в другую обтравочную фигуру.

Используя эту возможность, мы можем ловко реализовать эффект следования за границей. Псевдокод выглядит следующим образом:

div {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3s infinite linear;
    }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}

Рендеринг вместе со схемой:

CodePen — анимация границы клипа

Здесь, поскольку элемент будет обрезан, заимствование псевдоэлемента в качестве фона для обрезки и анимации достаточно, преимущество использования clip-path, вырезанная граница не будет создавать маленькие треугольники. Также этот метод поддерживает закругленные углы border-radius.

Если мы используем другой псевдоэлемент, чтобы реализовать стиль кнопки, мы можем получить такой эффект.

CodePen — анимация границы клипа 2

Умное использование переполнения

Следующий трюк реализуется с помощью переполнения. Реализуйте такую анимацию границы:

Почему вы говорите, что это overflow реализовано?

Взгляните:

CodePen Demo — 巧用overflow及transform实现线条hover效果.

Два основных момента.

1. мы используем overflow: hidden, чтобы скрыть целый элемент, который в противном случае оказался бы вне контейнера
2. мы используем transform-origin для управления центром вращения элемента.

Вы заметили, что почти все интересные эффекты CSS используют похожую технику?

* Проще говоря, анимация, которую мы видим, является лишь небольшой частью оригинального явления, благодаря специфическому обрезанию, изменению прозрачности, маскам и т.д., так что в итоге мы видим лишь часть оригинального явления. *

Умное использование border-image

С помощью border-image мы также можем реализовать некоторые интересные анимации границ. Есть очень хорошая статья о border-image — Правильное использование border-image, поэтому в этой статье мы не будем углубляться в основное определение.

Если у нас есть такой график:

Вы можете использовать возможности border-image-slice и border-image-repeat, чтобы получить похожий рисунок границы.

div {
  width: 200px;
  height: 120px;
  border: 24px solid;
  border-image: url(image-url);
  border-image-slice: 32;
  border-image-repeat: round;
}

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

CodePen Demo — border-image Demo

Далее, в этой статье — How to Animate a SVG with border-image, также объясняется способ использования border- image, что очень здорово.

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

Затем, мы также можем получить карту движущейся границы, код точно такой же, но граница движется:

CodePen Demo — Dancing Skull Border

border-image && Gradients

border-image также может быть заполнен цветом или градиентом напрямую, в дополнение к размещению ссылок на url.

Мы можем использовать border-image + filter + clip-path для достижения закругленной границы с градиентным преобразованием.

.border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

Демонстрация CodePen — clip-path, border-image и фильтр для достижения округлой градиентной границы

Наконец

Больше замечательных технических статей по CSS собрано на моем Github — iCSS.

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

Ну, вот и все для этой статьи, надеюсь, она вам поможет :).