Kako animirati isprekidanu granicu s CSS-om
Uređene granice mogu ukrasiti bilo koji element na stranici, ali CSS granice su ograničene kada je riječ o stilu. Programeri često pronalaze rješenja kao što su granice CSS-gradijenta, SVG granice, višestruke granice i više za oponašanje i nadogradnju izgleda okvira okvira i njegovih animacija.
Danas ćemo razmotriti jednostavniji hack za isprekidane granice: crtkane animacije na rubovima. Animirana isprekidana granica će biti izrađena samo pomoću obris i kutija-sjena, ne ostavljajući puno buke oko povrataka, jer obris podržava IE8 nadalje. Tako će korisnik i dalje moći vidjeti granice za razliku od SVG ili gradijenta. Time možete stvoriti dvobojne crtice. Pogledajmo.
Stvaranje granica
Najprije ćemo stvoriti granice. Za to ćemo koristiti isprekidani obris i sjenu okvira.
.banneri outline: 6px isprekidano žuto; box-shadow: 0 0 0 6px # EA3556;…
obris će trebati sve njegove vrijednosti; širina, vrsta i boja. kutija-sjena treba samo vrijednost za širenje koji bi trebao biti isti kao i širina obrisa i njegova boja. I obris i kutija-sjena zajedno će stvoriti učinak dvobojnih crtica.
Nakon toga možete prilagoditi širinu ili visinu okvira za željeni rub granice.
Animiranje granica
Za naš prvi primjer animacije, dodat ćemo CSS animacije ključnim kadrovima u skup banera s kontinuiranim animacijama, privlačeći pozornost. Za efekt animacije jednostavno ćemo zamijeniti boje obrisa i kutije.
@keyframes animateBorder do outline-color: # EA3556; box-shadow: 0 0 0 žuto;
Možete ciljati boju konture pomoću outline-color longhand svojstvo, međutim za kutiju sjena morat ćete sada dati sve vrijednosti skraćenom svojstvu.
Kada je animacija spremna, dodajte je u okvir.
.banneri outline: 6px isprekidano žuto; kutija-sjena: 0 0 0 6px # EA3556; animacija: 1s animateBorder beskonačno;…
Prijelazi na granice
Za primjer prijelaza dodavat ćemo granice slikama i animirati one na lebdenju. Također možete promijeniti veličinu obruba za različite efekte.
.fotografije nacrt: 20px isprekidana # 006DB5; kutija-sjena: 0px 0px 0px 20px # 3CFDD3; prijelaz: svi 1s;… .photos: lebdi boja-nacrt: # 3CFDD3; kutija-sjena: 0 0 0 20px # 006DB5;
Lebdite iznad tih slika da biste vidjeli da su vaši CSS ispali granice u svoj animiranoj slavi.
I to je omot. Možete pokušati zamijeniti isprekidane granice točkastim, ali učinak možda nije dobar. Također možete promijeniti vrstu konture tijekom animacije za još nekoliko efekata.
