Sådan animerer du stiplede grænser med CSS

Dekorerede grænser kan pryde ethvert element på side, men CSS-grænser er begrænsede, når det kommer til stil. Udviklere udarbejder ofte løsninger som CSS-gradientgrænser, SVG-grænser, flere grænser og mere for at efterligne og opgradere udseendet af boksgrænser og dets animationer.

I dag vil vi se nærmere på en enklere hack for stiplede grænser: stiplede grænse animation. Den animerede stiplede grænse oprettes kun ved hjælp af omrids og box-shadow, efterlader ikke noget tilbagefald, siden omrids understøttes fra IE8 og fremefter. På den måde kan brugeren stadig se grænserne, i modsætning til, når SVG eller gradient bruges. Med dette kan du også oprette bicolored bindestreger. Lad os se.

Oprettelse af grænserne

Vi vil først skabe grænserne. Til dette bruger vi en stiplede kontur og en bokseskygge.

 .bannere omrids: 6px stiplede gul; box-skygge: 0 0 0 6px # EA3556; ... 

Det omrids vil have brug for alle sine værdier bredde, type og farve. Det box-shadow har kun brug for værdien for sprede som skal være den samme som konturens bredde og dens farve. Både skitsen og boxskyggen sammen vil skabe effekten af ​​tofarvede bindestreger.

Du kan derefter justere boksens bredde eller højde for dit ønskede grænsekig på hjørnerne.

Animerer grænserne

Til vores første animationseksempel tilføjer vi CSS-keyframe-animationer til et sæt bannere, hvor grænserne animerer kontinuerligt og får opmærksomhed. Til animationseffekten bytter vi simpelthen farverne på omrids og bokseskygge.

@keyframes animateBorder til outline-color: # EA3556; boks-skygge: 0 0 0 6px gul; 

Du kan målrette mod konturens farve ved hjælp af skitse-farve longhand ejendom, men for box skygge bliver du nødt til at give alle værdier til shorthandegenskaben for nu.

Når animationen er klar, skal du tilføje den til feltet.

.bannere omrids: 6px stiplede gul; box-skygge: 0 0 0 6px # EA3556; animation: 1s animateBorder uendelig; ...

Overgange på grænserne

Til overgangseksemplet tilføjer vi grænser til billeder og animerer dem på svævebanen. Du kan også ændre grænsestørrelsen for forskellige effekter.

.fotos omrids: 20px dashed # 006DB5; box-skygge: 0px 0px 0px 20px # 3CFDD3; overgang: alle 1s; ... .fotografier: svæver konturfarve: # 3CFDD3; box-skygge: 0 0 0 20px # 006DB5; 

Nu svæver du over disse billeder for at se dine CSS punkterede grænser i al sin animerede herlighed.

Og det er en wrap. Du kan prøve at erstatte stiplede grænser med punkterede, men effekten kan ikke være så god. Du kan også ændre omlægningstypen under animationen for nogle få effekter.