Kako animirati črtkano obrobo s CSS

Okrašene meje lahko krasijo kateri koli element na strani, vendar so meje CSS omejene, ko gre za stil. Razvijalci pogosto dobijo rešitve, kot so meje CSS-gradienta, meje SVG, več robov in več za posnemanje in nadgradnjo videzov robov okvirjev in njegovih animacij..

Danes bomo preučili enostavnejši kramp za črtkane meje: črtkano animacijo robov. Animirana črtkana meja bo ustvarjena samo z uporabo oris in box-shadow, ker ne ovirajo ničesar, ker ni bilo ničesar oris podpira od IE8 naprej. Na ta način bo uporabnik še vedno lahko videl meje drugače kot pri uporabi SVG ali gradienta. S tem lahko ustvarite tudi dvobarvne pomišljaje. Poglejmo.

Ustvarjanje robov

Najprej bomo ustvarili meje. Za to bomo uporabili črtkano obrobo in senčno polje.

 .pasice oris: 6px rumen rumen; box-shadow: 0 0 0 6px # EA3556;…

Oglejte si obrobo CSS obrobo - obris in senco polja s Preethi (@rpsthecoder) na CodePen.

The oris potrebovali bodo vse svoje vrednote; širino, vrsto in barvo. The box-shadow potrebuje samo vrednost za širjenja ki mora biti enaka širini orisa in njeni barvi. Tako obris kot škatla skupaj ustvarjata učinek dvobarvnih črt.

Nato lahko prilagodite širino ali višino polja za želeni robni pogled na vogalih.

Animiranje meja

Za naš prvi primer animacije bomo dodali CSS animacije ključev v niz pasic z mejami, ki animirajo nenehno in pridobivajo pozornost. Za učinek animacije bomo preprosto zamenjali barve sence orisa in okvirja.

@keyframes animateBorder do outline-color: # EA3556; box-shadow: 0 0 0 6 px rumena;

Lahko uporabite barvo orisa barva orisa lastnina longhand, vendar pa bo za senčno polje zdaj treba dati vse vrednosti kratkemu premoženju.

Ko je animacija pripravljena, jo dodajte v polje.

.pasice oris: 6px rumen rumen; box-shadow: 0 0 0 6px # EA3556; animacija: 1s animateBorder neskončno;…

Oglejte si animacijo obrobljenega roba CSS na strani Preethi (@rpsthecoder) na CodePen.

Prehodi na mejah

Za primer prehoda bomo dodali obrobe slikam in jih animirali pri lebdenju. Velikost obrobe lahko spremenite tudi za različne učinke.

.fotografije oris: 20px prečrtano # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; prehod: vsi 1s;… .photos: lebdi barva: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5;

Zdaj se pomaknite na te slike in si oglejte, da so vaši CSS prekrili meje v vseh svojih animiranih slavah.

Oglejte si premostitev meja prehoda Pen CSS s strani Preethi (@rpsthecoder) na CodePen.

In to je obloga. Lahko poskusite zamenjati črtkane meje s pikčastimi, vendar učinek morda ni dober. Prav tako lahko spremenite tip orisa med animacijo za nekaj dodatnih učinkov.