CSS animacije in njegove možnosti

Se sprašujete, kako narediti animacije CSS, mnogi uporabniki iti v iskanju pouka in navodil. In čeprav se taka navodila lahko najdete tukaj, med drugim, dali vam bomo glavno koristne nasvete pri ustvarjanju animacije z uporabo CSS.

Idealen razvoj skrivnost

Nasvet, ki ga lahko glede na tiste, ki želijo, da v celoti vem, kaj je gladka animacija CSS, je, kot sledi. Ko so dnevne poskusi s pripravljenimi koščki kode in poskusite za opravljanje svoje poskuse. V času prost od dela na svojih spletnih mestih, poskusite da vidim, kaj se dogaja z zlaganjem kosa kode, da to ali ono lastnost študija v celoti. Poskusite izvajati vse vrste zanimivih idej, ki uporablja povsem različnih jezikovnih orodij, in CSS animacije bo odprt za vas na nov način. Ta preprost nasvet je to - eksperiment za sebe.

CSS-animacija videz

In zdaj za zanimive primere. Kot pravilo, standard uporaba animacije, je spremeniti nekatere elemente spletne strani postopoma v daljšem časovnem obdobju. Toda to je preveč očitno, kajne? Torej, tukaj delimo z vami izredno način uporabe čas pojavljanja animacije.

Dejstvo, da lahko dejanske spremembe na mestu v kosu animacije ali v celoti skoraj takojšen. Da bi to naredili, smo zaprosi dveh ključnih sličic, ampak uporabljajo zelo majhen razpon. Na primer, lahko je enak 0,001%. V tem primeru se lahko CSS animacije zgodi v trenutku. To je kot nalašč za simulacijo Neonska reklama. Ta znak utripa, in če bo animacija CSS potem večja preglednost in za uporabo in funkcijo besedilnega senco, bo znak, skoraj kot prava stvar.

Tukaj je primer kode.

Izboljšanje funkcionalne gumbe

Če menimo, da je vprašanje, kaj lahko nenavadno gumb CSS-animacija, je mogoče reči, da je gumb za možnosti dekoracijo na straneh velik set. Razmislite en primer. Učinek pritiskom na konveksnih gumbe. Primer kode - spodaj.

S tako preprostim kos animacije CSS bloka kode bo videti precej dobro. Izgleda zelo zanimivo in se pogosto uporablja na povsem različnih lokacijah.

CSS-animacija, ko z miško delček mesta

Dinamično in moderno mesto, dlje ostane na uporabnika. Poleg tega je pomembno vlogo tudi interaktivnosti. To je seveda res, ampak kaj lahko pomaga, da bi mesto kot interaktivna možnem času?

Zelo dobro potem poglej za delo z elementi in fragmentov mestu, če miške. Animacija gumbi ko hover smo razpravljali zgoraj, vendar z izjemo, da lahko "oživiti" in različnih kosov mestu, zaradi česar so najbolj elegantna. Tako kot vse ostalo, glavno načelo tukaj - ne pretiravajte.

Torej, je odlična prehod lastnine, ki lahko traja do štiri povezane lastnosti.

V določenem časovnem CSS-animacijo, ko hover nad tem delom kodeksa bo spremenilo. Čas je odvisna od premoženja trajanja. To je, ko hover nad točko se začne svojevrstno spremembo katerokoli lastnost, da smo postavili v izbirniku. V našem primeru je to - .element (točka naprej). Nekoliko nižja je primer kode, ko je prehod iz posode div, ki ima psevdo .hover, ozadje spremeni iz rdeče v zeleno.

Ko uporabnik zadrži kazalec miške CSS animacije se takoj ne spremeni, vendar z zamudo nek delček sekunde, ki ustvarja zanimiv učinek.

Poleg tega, če v prejšnjem primeru, boste morali določeno pravilo, ki je v ozadju v div element spremenila iz rdeče v zeleno in gibanja v 0,4 sekunde, je treba opozoriti, da je z vso vrednost, se lahko uporablja za celotno premoženje je v celoti takoj.

Primer koda takole.

Kot je prikazano na lastnosti oblazinjenja in ozadja prehodnim učinkom se pojavi, ko se določi prehodno lastnost. Vedeti morate, da lahko določite z vejicami ločen določen nabor vrednot.

Nekateri nianse uporabo te vrste animacije na gumbe

Načeloma, na dolgi rok pa je ni tako pomembno, v kakšnem vrstnem redu se bodo določena in prenese na vrednosti podatkov. Razen v enem primeru. Mi lahko ukvarjajo z zamudo premoženja. V tem primeru moramo določiti trajanje in čas. Z drugimi besedami, bomo potrebovali kodo povedati, kako dolgo zelo potrebno bo k nam prišlo do zamude.

Glede na to, da so nekatere lastnosti, ne more biti posledica prehoda. To pomeni, da ne more biti prehodna. To je posledica dejstva, da jih ni mogoče animirani.

besedilo animacije

S pomočjo kode lahko nastavite in odlične animacije CSS besedila. To je lahko neke vrste izdelka, in glavni naslov, naslov spletne strani. Kot je navedeno zgoraj, je glavna stvar - ga ne pretiravajte in ne pa vaše spletne strani v odlagališče, ki bo videti poceni.

No, poskusimo ugotoviti, kaj CSS animacije besedila, in jo ustvarjajo, in besedilo sence. Morda ste videli grozljivke, v katerih imena slik sami zdelo, da zbledi ob vsakem dim-temno ozadje. Poskusimo ponovno splošen primer nekaj takega.

Animirati besedilo v stilu grozljivk

Pravzaprav je celotna ideja je, da besedilo, v katerem so bila pisma malo nejasen in bi zavrtite. Pri čemer je med črkami mora biti prostor. Uporabili bomo interalphabetic senco, kot tudi interval. Da bi uresničili idejo, potrebujemo scenarij Lettering.js avtorstvo Dave Rupert. Je potrebno zaviti besede plus nekaj črk v tag dobo. Najprej morate zaviti stavek v H2 oznako. Tukaj je primer kode.

Potem obernom vse besede v H2 oznake v tag dobo.

To se zgodi, kot je ta.

To bo videti nekoliko okorno, vendar ne pustite, da moti.

Manične pridobivanje zadostnih strukturo.

Kot rezultat, smo vsak od naših obstoječih črk zavite v tag dobo. Ti Izkazalo se res veliko. Toda primer je zelo poenostavljeno v kodo zgoraj Dobljeni. Njihova celotna struktura, lahko napišete sami, in da bo nekaj več. Prav tako je odvisno, kakšno besedilo, ki ga želite uporabiti.

Sklepamo, naše delo malo stiliziran. Vse naše naslove v zgornjem primeru, se bo nahajal v celotni širini zaslona. In bodo traja skoraj ves razpoložljiv prostor.

Ker bomo, da se vse naše črkami na sredini zaslona, nato pa, za našo posodo in moramo tudi prilagodljivo polje.

Tukaj je primer njegove kode.

Zdaj smo storili tako, da so vse črke, ki so zaviti v span class, ki spada v matično razreda .os stavkov, bo dobro in bo z njo v sredini.

Ne pozabite dodati nekaj praznega prostora, ki je sama črka razmik.

V tem primeru bi prvi ovoj všeč, da so nekatere dodatne lastnosti. Ta lastnost perspektiva. To nam bo omogočilo, da poskrbite, da bo to mesto všeč, da izstopajo, pridejo v ospredje.

Sami, kot je naše črk bo pregleden, in mi bo sprožila vrsto animacije za njih nekje v 5,2 sekunde. Spodaj - primer kode.

Prav tako je pomembno, da se ugotovi, kako in s kakšnimi zamude bodo prikazani naše stavke in besedne zveze. Kateri od delov besedila se pojavijo hitreje kot prejšnje, in koliko. Koda bo videti takole.

Dajmo majhno, a zelo zanimiv učinek. Postavite nepreglednost 0,2. Interalphabetic razdalja zato bo zelo velik. Pisma se zavrti tudi več osi Y. Vidimo, kot tudi uporabniki vaše spletne strani bo le majhen del teh pisem. Prav tako ne pozabite, da je učinek lastnosti text-sence. Pol animacija, smo naredili nenavadno stvar. Mi bomo neposredno ćrkami sami, in tudi zmanjšati razdaljo, ki je med njimi, in nato povečanje motnosti, in po povernom znakov na 0 za osi Y.

Na koncu smo spet dodali nekaj črk ali ogroženih jih promasshtabiruem. To bo nov majhen dodati učinek zameglitve.

In končno zadnji stavek CSS-animacije.

In ja, na koncu dodamo piko. Osredotočili se bomo na nekaterih posebnih besed. Ti bodo imeli krepko obraz. To bo potrebno pozornost.

Ne pozabi navdihom

Pri poskusu, da se poskus z lastnostmi in CSS animacije, poskusite najti navdih v vsem, kar v vsakdanjem življenju. To je lahko karkoli, od zanimivo spletnih strani v nekaj čudovitega video učinek.

Poleg tega, če ne ločite, kako to, ali tak učinek delati in poskusite znova sami, lahko dosežete odlične rezultate. Ali pa vsaj, vedno izvedeti kaj več o možnostih programskega jezika, da ste v resnici, ga uporabi. Niti v celoti realiziran tvoja ideja lahko tudi izkaže za zelo spektakularen.