CSS Animacija in njene zmožnosti

Vprašajte vprašanje, kako narediti animacijo

Skrivnost idealnih modelov

Glavni nasvet, ki ga lahko daste tistemu, ki se želi naučiti v celoti, kaj je gladka animacija CSS, je to. Z vsakodnevnimi eksperimenti s pripravljenimi deli kode poskusite izvesti lastne preizkuse. V času brez dela na svojih spletnih mestih poskusite videti, kaj se zgodi, ko zložite enega ali drugega kosa kode, da v celoti preučite lastnost. Poskusite izvesti vse vrste zanimivih idej z uporabo popolnoma drugačnih jezikovnih orodij, animacija CSS pa se bo odprla za vas na novi strani. Ta preprost nasvet je naslednji - eksperiment sami.

Animacija videza CSS

In zdaj se obrnemo na zanimive primere. Običajno je standardna uporaba animacije, da sčasoma spremeni nekatere elemente mesta. Ampak to je preveč trmast, ali ne? Zato bomo tukaj delili z vami nenavaden način uporabe videza animacije.

Dejstvo je, da so dejanske spremembe na mestu v kosu animacije ali v njegovi polni obliki skoraj trenutne. Za to dodelimo dva ključna okvira, vendar uporabljamo zelo majhen interval. Na primer, lahko znaša 0,001%. V tem primeru se lahko takoj izvede animacija CSS. To je kot nalašč za posnemanje vsakega neonskega znaka. Ta znak bo utripal, in če animacija CSS še vedno uporablja preglednost in lastnost besedilne sence, bo znak skoraj enak kot pravi.

Tukaj je primerna koda.

Izboljšanje funkcij gumbov

Če upoštevamo vprašanje, kako nenavadno je to CSS-animacijski gumb, potem lahko rečemo, da so možnosti za dekoriranje gumbov na spletnih mestih veliko. Poglejmo si en primer. Učinek stisnjenega konveksnega gumba. Primer kode je spodaj.

S to preprosto kosovno kodo bo animacija bloga CSS zelo dobra. Izgleda zelo zanimivo in se pogosto uporablja na odličnih različnih mestih.

CSS-animacija, ko lebdite nad delom spletnega mesta

Bolj dinamični in modernejši strani, dlje, ko uporabnik ostane na njem. Poleg tega igra pomembno vlogo tudi interaktivnost. Seveda, to je res, vendar kaj lahko pripomore, da je stran čim bolj interaktivna?

Zelo dober izgled dela z zasnovo elementov in fragmentov mesta, ko miškin kazalec zasukate. Animacija gumbov, ko lebdite, smo razstavili zgoraj, vendar poleg tega lahko »oživljate« in vse vrste delov spletnega mesta, kar jih naredi čim bolj elegantno. Kot vse ostalo, glavno načelo ni pretiravanje.

Torej, obstaja odlična lastnost prehoda, ki lahko traja do štiri povezane lastnosti.

V določenem času se bo CSS-animacija, ko se boste premaknili na ta del kode, spremenila. Čas določi lastnost trajanja. To pomeni, da ko premikate miškin nad elementom, na lasten način začne spreminjati neko lastnost, ki smo jo postavili v izbirniku. Za naš primer je to element (dot naprej). Spodaj je koda vzorca, ko se spreminja iz zabojnika div, ki ima psevdok razreda .hover, se ozadje spremeni iz rdeče v zeleno.

Ko miško miške miškin kazalec miške premaknete, se animacija CSS ne spremeni takoj, ampak z zamudo nekaj sekund, kar ustvarja zanimiv učinek.

Poleg tega, če ste v prejšnjem primeru določili pravilo, da bi se moralo ozadje elementa div spremeniti iz rdeče in zeleno za 0,4 sekunde, morate upoštevati, da se z vrednostjo vse lahko sklicujete na celotno premoženje kot celoto takoj.

Primer kode je naslednji.

Kot je prikazano, imajo lastnosti polnjenja in ozadja prehodni učinek, ki ga določi prehodna lastnost. Opozoriti morate, da lahko določite določen niz vrednosti, ločenih z vejicami.

Nekaj ​​odtenkov uporabe te vrste animacije na gumbih

Načeloma v glavnem ni tako pomembno, v kakšnem vrstnem redu bodo navedene vrednosti navedene in navedene. Razen v enem primeru. Z lastnostjo zamude se lahko ukvarjamo. V tem primeru moramo določiti časovno obdobje. Z drugimi besedami, v kodi moramo zagotoviti, kako dolgo bo zamuda, ki jo potrebujemo, izvedena.

Ne pozabite pa, da nekatere lastnosti ne morejo imeti prehodnega učinka. To pomeni, da ne morejo biti prehodne. To je posledica dejstva, da morda niso že animirani.

Besedilna animacija

S pomočjo kode lahko določite odlično besedilno animacijo CSS. To je lahko neki članek in velik naslov, naslov mesta. Kot že omenjeno zgoraj, glavna stvar ni pretiravati in ne, da bi svojo spletno stran spremenili v odlagališče, ki bo videti poceni.

No, poskušajmo izvedeti, kaj je animacija besedilo CSS in ga ustvarite ter sence besedila. Morda ste videli grozljive filme, v katerih so se imena slik sami zdrobila na nekem temno temnem ozadju. Poskusimo ponoviti nekaj podobnega na splošnem primeru.

Animiraj besedilo v slogu grozljivih filmov

Pravzaprav je samo ideja, da se pripravi besedilo, v katerem bi bile črke rahlo zamegljene in se vrtele. Med črkami mora biti prostora. Uporabili bomo senco med slepimi črkami in intervalom. Za uresničitev ideje potrebujemo pisavo Lettering.js iz avtorstva Daveja Ruperta. Potrebno je zaviti besede in črke v več etiketah. Najprej morate v oznako h2 zaviti stavke. Tukaj je primerna koda.

Potem zavijte vse besede v oznake h2 v oznaki span.

To se bo zgodilo tako.

Izgledal bo nekoliko okoren, vendar ga ne bo zmedeno.

Pridobite precej noro strukturo.

Zato vsaka črka, ki jo imamo v oznaki span, zavijemo. Izkazalo se je res veliko. Toda v zgornji kodi je primer precej poenostavljen. Celotno strukturo lahko napišete sami in bo nekoliko večja. Odvisno je tudi od tega, katero besedilo boste uporabili.

Dokončajmo delo z majhno stilizacijo. Vsi naši naslovi v zgornjem primeru bodo v celotni širini zaslona. In bodo zasedli skoraj ves prostor.

Ker bomo v središče zaslona postavili vsa naša pisma, za našo posodo potrebujemo tudi prožnost.

Vzemimo primer njegove kode.

Zdaj smo naredili, da bodo vse črke, ki so zavite v razpon span, ki spada v nadrejeni razred .os-fraze, postavljene in bodo točno določene v središču.

Ne pozabite, da dodate malo prostega prostora, to je razmik med črkami samega.

V tem primeru ima prvi ovojnik določeno dodatno lastnost. Ta lastnost je perspektiva. To nam bo omogočilo, da bo to mesto, tako kot se bo izstopalo, prišlo v ospredje.

Iste črke bodo pregledne in animacijskemu intervalu bomo za njih odprli nekje v 5,2 sekundah. Spodaj je primerna koda.

Pomembno je tudi ugotoviti, kako in z zakasnitvijo se bodo pojavile ponudbe in stavki. Kateri del besedila bo prikazan hitreje kot prejšnji, in koliko. Koda bo videti tako.

Dali bomo majhen, a zelo radoveden učinek. Nastavite motnost na 0,2. Razmik med črkami bo precej velik. Črke bodo prav tako nekoliko okretne vzdolž osi Y. Ti in uporabniki vašega spletnega mesta bodo videli le majhen del teh črk. Prav tako ne pozabite uveljaviti lastnosti besedilne sence. Polovica animacije, naredili bomo nenavadno stvar. Očistili bomo črke in zmanjšali razdaljo, ki leži med njimi, nato povečamo motnost, nato pa znake spreminjamo na 0 vzdolž osi Y.

Na koncu bomo znova dodali izginulim črkam in jih nekoliko razčlenili. To bo spet dalo majhen učinek zameglitve.

In nazadnje zadnja fraza CSS-animacije.

In da, končno dodajte končni dotik. Osredotočili se bomo na nekatere posebne besede. Imeli bodo maščobno znamenje. To bo dalo potreben poudarek.

Ne pozabite na vire navdiha

Ko poskušate eksperimentirati s svojimi lastnostmi in animacijami, poskusite najti navdih v vsakdanjem življenju. To je lahko karkoli, z zanimive spletne strani do nekaj velikega video učinka.

Poleg tega, če ne boste izsušili, kako je bil ta ali ta učinek dosežen, in poskusite sami znova ustvariti, lahko dosežete odlične rezultate. Ali pa vsaj naučite nekaj več o zmožnostih programskega jezika, ki ga dejansko uporabljate. Celo ideja, da niste v celoti izvedli, je zelo lahko zelo učinkovita.