CSS причудливая анимация границ

внешний интерфейс CSS
CSS причудливая анимация границ

покупки сегодняБлог сайта -- shoptalkhow, очень интересно посмотреть на такой интерфейс:

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

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

пограничная собственность

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

За исключением самых распространенныхsolid,dashed, граница CSS также поддерживаетnone,hidden,dotted,double,groove,ridge,inset,outsetи другие стили. Удалить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 -- width border animation

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

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

использовать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Анимации не поддерживаются, но поддерживаются градиенты. Мы добавляем еще один к вышеупомянутому divhoverЭффект,hoverпри добавленииanimationанимация, изменение элемента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 -- dashed border animation

На самом деле, из-за особого отношения между фоном и рамкой, при использовании границы путем измененияbackground-positionЕе тоже можно решить, но сложнее. Для заполнения отношений между фоном и границей вы можете прочитать эту статью:Различные реализации полосатых бордюров

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

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

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

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);
	}
}

Взгляните на эффект:

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

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

CodePen Demo -- gradient border animation

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

После освоения вышеуказанных базовых навыков мы можем внести некоторые коррективы в цвета градиента, мы превратим 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 -- gradient border animation 2

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

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

conic-gradientмагия

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

Вышеупомянутое в основном используется для линейных градиентовlinear-gradient. Мы используем угловой градиент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 -- Rotating border 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 animation

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

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

CodePen - clip-path border animation 2

overflowмагия

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

зачем использоватьoverflowвыполнить?

Вставьте схему:

Демонстрация CodePen — использование переполнения и преобразования для достижения эффекта наведения на строку

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

  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Анимация границы очень крутая.

В отличие от приведенного выше примера, нам нужно только заставить наш узор двигаться, то есть нам нужно такое фоновое изображение (самородки не поддерживают анимацию SVG,Исходный адрес изображения):

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

CodePen Demo -- Dancing Skull Border

border-imageИспользуйте градиенты

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

Также была предыдущая статья оborder-imageСтатьи --Умело реализуйте градиентную границу с закругленными углами

мы можем использовать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.Из-за нехватки места я не буду раскрывать их по одному.

Это конец этой статьи, надеюсь, она вам поможет :), если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS

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

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

Категории