Cum să animați frontiera spart cu CSS

Frontierele decorate pot împodobi orice element din pagină, dar limitele CSS sunt limitate în ceea ce privește stilul. Dezvoltatorii găsesc adesea soluții cum ar fi granițele CSS-gradient, granițele SVG, frontierele multiple și multe altele pentru a imita și a îmbunătăți aspectul frontierelor casetei și a animațiilor sale.

Astăzi vom examina o hack-uri mai simple pentru granițele întrerupte: o animație de frontieră întreruptă. Frontiera animată întreruptă va fi creată numai utilizând contur și box-shadow, fără să lase nici un fel de agitație în ceea ce privește reținerile contur este susținut de la IE8. În acest fel, utilizatorul va putea să vadă granițele spre deosebire de SVG sau gradient. Cu aceasta puteți crea și linii bicolore. Hai să aruncăm o privire.

Crearea Frontierelor

Mai întâi vom crea granițele. Pentru aceasta, vom folosi o linie întreruptă și o umbră cutie.

 .bannere outline: 6px dashed galben; box-shadow: 0 0 0 6px # EA3556; ... 

contur va avea nevoie de toate valorile sale; lățimea, tipul și culoarea. box-shadow are nevoie numai de valoare pentru răspândire care ar trebui să fie la fel ca lățimea conturului și culoarea sa. Atât conturul, cât și umbra cutie vor crea împreună efectul unor linii cu două culori.

Apoi, puteți ajusta lățimea sau înălțimea casetei pentru aspectul dorit al chenarului în colțuri.

Animarea Frontierelor

Pentru primul exemplu de animație, vom adăuga animații CSS cheie-cheie într-un set de bannere, frontierele animând continuu, câștigând atenție. Pentru efectul de animație vom schimba pur și simplu culorile conturului și umbra cutiei.

@frame-cheie animateBorder la outline-color: # EA3556; box-shadow: 0 0 0 6 px galben; 

Puteți viza culoarea conturului utilizând schiță color longhand proprietate, cu toate acestea pentru umbra cutie va trebui să dea toate valorile proprietății shorthand pentru moment.

Odată ce animația este gata, adăugați-o la cutie.

.bannere outline: 6px dashed galben; box-shadow: 0 0 0 6px # EA3556; animație: 1s animateBorder infinit; ...

Tranziții la granițe

Pentru exemplul de tranziție, vom adăuga granițe la imagini și vom anima pe hover. De asemenea, puteți modifica mărimea frontierei pentru diferite efecte.

.fotografii outline: 20px dashed # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; tranziție: toate 1s; ... .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Acum, plasați mouse-ul peste aceste imagini pentru a vă vedea frontierele CSS întrerupte în toată gloria animată.

Și, asta e o învelitoare. Puteți încerca să înlocuiți margini distruse cu cele punctate, dar efectul ar putea să nu fie la fel de bun. De asemenea, puteți modifica tipul conturului în timpul animației pentru mai multe efecte.