Как да анимирате Dashed Border с CSS

Декорираните граници могат да украсяват всеки елемент на страницата, но границите на CSS са ограничени, когато става въпрос за стил. Разработчиците често излизат с решения като граници на CSS градиент, граници на SVG, множество граници и повече за имитиране и надграждане на външния вид на границите на кутиите и неговите анимации.

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

Създаване на границите

Първо ще създадем границите. За това ще използваме прекъснат контур и сянка на кутия.

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

Най- очертание ще се нуждаят от всички свои ценности; ширина, вид и цвят. Най- кутия сянка се нуждае само от стойността за разпространение която трябва да бъде същата като ширината на контура и цвета му. Както контурът, така и кутията-сянка заедно ще създадат ефекта на двуцветни тирета.

След това можете да регулирате ширината или височината на полето за желания от вас ъгъл.

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

За първия пример за анимация ще добавим CSS анимации с ключови кадри към набор от банери, като границите анимират непрекъснато, привличайки внимание. За анимационния ефект ние просто ще сменим цветовете на очертанието и сянката на кутията.

@keyframes animateBorder до outline-color: # EA3556; box-shadow: 0 0 0 6px жълто; 

Можете да насочвате към цвета на контура, като използвате очертание цвят longhand свойство, обаче за кутия сянка ще трябва да даде всички стойности на краткото свойство за сега.

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

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

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

За примера на прехода ще добавим граници към картини и ще анимираме тези при навъртане. Можете също да промените размера на границата за различни ефекти.

.снимки контур: 20px пунктиран # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; Преход: всички 1s;… .photos: задържане цвят на контура: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Сега задръжте курсора на мишката над тези изображения, за да видите, че CSS премахна границите във всичките му анимирани слави.

И това е обвивка. Можете да опитате да замените прекъснатите граници с пунктирани, но ефектът може да не е толкова добър. Можете също да промените типа контур по време на анимацията за още няколко ефекта.