Kaip animuoti brūkšninę sieną su CSS
Dekoruoti sienos gali puošti bet kurį puslapio elementą, bet CSS sienos yra ribotos, kai kalbama apie stilių. Kūrėjai dažnai pateikia sprendimus, tokius kaip CSS gradiento ribos, SVG ribos, kelios sienos ir daugiau, kad imituotų ir atnaujintų langelių sienų ir animacijų išvaizdą.
Šiandien mes pažvelgsime į paprastesnę brūkšnį, skirtą ribotoms sienoms: brūkšninės sienos animacija. Animuota brūkšninė riba bus sukurta naudojant tik kontūras ir langelis-šešėlis, nuo to laiko, kai nepavyksta išsisukinėti kontūras yra palaikomas iš IE8. Tokiu būdu vartotojas vis tiek galės matyti ribas, skirtingai nuo tada, kai naudojamas SVG arba gradientas. Taip galite sukurti ir dvipusius brūkšnelius. Pažiūrėkime.
Sienų kūrimas
Pirmiausia mes sukursime sienas. Tam naudosime brūkšninį kontūrą ir langelio šešėlį.
.baneriai kontūras: 6px brūkšninis geltonas; dėžutės šešėlis: 0 0 0 6px # EA3556;…
The kontūras reikės visų savo vertybių; plotis, tipas ir spalva. The langelis-šešėlis reikia tik vertės išplito kuri turėtų būti tokia pati kaip kontūro plotis ir spalva. Ir kontūras, ir dėžutės šešėlis kartu sukurs dviejų spalvų brūkšnių efektą.
Tada galite sureguliuoti langelio plotį arba aukštį, kad galėtumėte peržiūrėti norimus kraštus.
Animuoti sienas
Pirmuoju mūsų animacijos pavyzdžiu pridedame CSS raktų rėmelio animacijas į rinkinius, kuriuose sienos yra animuojamos, ir vis daugiau dėmesio skiriame. Dėl animacijos efekto mes paprasčiausiai pakeisime kontūro ir dėžutės šešėlio spalvas.
@keyframes animateBorder į kontūro spalvą: # EA3556; dėžutės šešėlis: 0 0 0 6px geltona;
Galite nukreipti kontūro spalvą naudodami kontūro spalva „longhand“ nuosavybė, tačiau dėžutės šešėlį turėsite pateikti visas vertes, kurios turi būti trumpalaikės nuosavybės.
Kai animacija bus paruošta, pridėkite jį prie dėžutės.
.baneriai kontūras: 6px brūkšninis geltonas; dėžutės šešėlis: 0 0 0 6px # EA3556; animacija: 1s animateBorder begalinis;…
Perėjimai ant sienų
Pereinamojo pavyzdžio pavyzdžiu mes pridėsime paveikslėlius prie sienų ir animuosime tuos, kurie pakyla. Taip pat galite pakeisti skirtingų efektų sienos dydį.
.nuotraukos kontūras: 20px brūkšnys # 006DB5; dėžutės šešėlis: 0px 0px 0px 20px # 3CFDD3; perėjimas: visi 1s;… .photos: hover outline-color: # 3CFDD3; dėžutės šešėlis: 0 0 0 20px # 006DB5;
Dabar, užveskite ant šių vaizdų, kad pamatytumėte savo CSS išjungtas sienas visose savo animuotose šlovėse.
Ir tai vyniojimas. Galite pabandyti pakeisti taškines ribas taškinėmis, bet efektas gali būti ne toks geras. Taip pat galite keisti kontūro tipą animacijos metu, kad galėtumėte atlikti dar keletą efektų.
