CSS Animacija ir jos galimybės

Nežinote , kaip padaryti animaciją CSS, daugelis vartotojų eiti ieškoti pamokas ir instrukcijas. Ir nors tokie nurodymai gali būti rasti čia, tarp kitų dalykų, mes suteiksime jums pagrindinę naudingų patarimų į animacijos kūrimas naudojant CSS.

idealus plėtros paslaptis

Patarimai, kurie gali būti skiriamas tiems, kurie nori pilnai žinau, kas yra sklandžiai animacija CSS, yra taip. Kai kasdien eksperimentai su paruoštų gabalų kodas ir bandykite atlikti savo eksperimentus. Per tą laiką, laisvos nuo darbo jų pačių svetainėse, pabandykite pamatyti, kas atsitiks su kodo gabalas lankstymo, studijuoti ar kitą turtą pilna. Pabandykite įgyvendinti visas įdomių idėjų rūšių, naudojant labai skirtingus įrankius kalbos ir CSS animacija atvers jums nauju būdu. Šis paprastas patarimas tai - eksperimentas sau.

CSS animacija išvaizda

O dabar įdomių pavyzdžių. Kaip taisyklė, standartinis naudojimas animacija yra pakeisti kai kurių svetainės elementų palaipsniui per tam tikrą laiką. Bet tai pernelyg akivaizdus, ar ne? Taigi čia mes su jumis pasidalinti neeilinį būdą naudotis animacijos atsiradimo laiką.

Tas faktas, kad faktiniai pakeitimai Svetainės su animacijos rietime arba visas gali būti beveik akimirksniu. Norėdami tai padaryti, mes užduoti du narvų, bet naudoti labai nedidelį asortimentą. Pavyzdžiui, ji gali būti lygi 0,001%. Šiuo atveju, CSS animacija gali atsitikti iš karto. Jis puikiai tinka imituoti neoninė. Šis ženklas mirksės, o jei animacija CSS tada bus daugiau skaidrumo ir naudoti ir funkcija text-shadow, ženklas bus beveik kaip realus dalykas.

Štai pavyzdys kodas.

Pagerinti funkcinius mygtukus

Jei mes manome, kad tai, kas gali būti neįprastas klausimą CSS animacija mygtuką, galima teigti, kad apdailos parinkčių mygtuką svetainėse didelis rinkinys. Apsvarstykite vieną pavyzdį. Iš spausdami išgaubtas mygtukus poveikis. Pavyzdys kodas - žemiau.

Su tokia paprasta gabalas animacija CSS blokas kodas atrodys gana gerai. Jis atrodo labai įdomus ir dažnai naudojami visiškai skirtingose vietose.

CSS animacija, kai jūs Pakimba virš svetainės fragmentą

Dinamiška ir moderni svetainė, tuo ilgiau jis lieka vartotojui. Be to, svarbus vaidmuo taip pat vaidina interaktyvumo. Tai tikrai tiesa, bet kas gali padėti padaryti svetainę kaip interaktyvus, kaip įmanoma?

Labai gerai, tada atrodo, kad dirbti su dizaino elementais ir fragmentai svetainėje, kai pele. Animacijos mygtukai, kai jūs Pakimba aptarėme aukščiau, bet be to galite "atgaivinti" ir įvairią svetainėje, todėl jiems labiausiai stilingas. Kaip ir visa kita, pagrindinis principas čia - ne persistengti ji.

Taigi, ten yra puikus perėjimas turtas, kuris gali trukti iki keturių susijusių savybių.

Per tam tikrą laiko CSS-animacija, kai užveskite pelės žymeklį ant šio kodo pasikeis gabalas. Dabartinis laikas yra nustatomas pagal trukmė nuosavybė. Tai yra, kai jūs Pakimba virš elemento jis pradeda savotišką pakeisti bet kokį turtą, kad mes nustatyti selektoriaus. Mūsų atveju tai - .element (taškas į priekį). Šiek tiek žemiau yra iš kodo, kai perėjimas iš konteinerių div, kuris turi pseudo .hover, fonas pasikeičia iš raudonos į žalią pavyzdys.

Kai vartotojas tvyro pelės CSS animacija nekeičia iš karto, tačiau atidėtas tam tikrą sekundės dalį, kuri sukuria įdomų efektą.

Be to, jei ankstesniame pavyzdyje, jūs paprašė tam tikrą taisyklę, kad fonas div elementas buvo pakeistas iš raudonos į žalią ir judėti 0,4 sekundes, reikėtų pažymėti, kad naudojant visą vertę, galite kreiptis į visą turtą yra visiškai iš karto.

Kodo pavyzdys pavaizduotas taip.

Įrodyta, kad iš padding ir fono perėjimo efektas pasireikš, kurį lemia perėjimo nuosavybės savybes. Atkreipkite dėmesį, kad galite nurodyti kableliais atskirtų tam tikrą reikšmių aibę.

Kai naudojate šį animacija tipo mygtukų niuansai

Iš esmės, ilgainiui tai nėra taip svarbu kokia tvarka bus nurodyta ir perkeliami į duomenų verčių. Išskyrus vieną atvejį. Mes galime kovoti su delay turtą. Tokiu atveju, mes turime nurodyti trukmę ir laiką. Kitaip tariant, mes turime kodą pasakyti, kiek laiko labai reikalinga mums įvyks vėlavimas.

Turint omenyje, kad kai kurios savybės gali būti perėjimo efektas. Tai reiškia, kad jie negali būti laikinas. Taip yra dėl to, kad jie negali būti animuotas.

teksto animacija

Su kodas gali būti nustatytas ir puikus animacija CSS tekstą pagalba. Tai gali būti kai kurie straipsnyje natūra, o pagrindinis pavadinimas, tinklalapio pavadinime. Kaip minėta, pagrindinis dalykas - nereikia persistengti ir nereikia paversti savo svetainę į sąvartyną, kuris atrodys pigiai.

Na, pabandykime išsiaiškinti, ką CSS animacija teksto, ir sukurti ją, ir teksto šešėliai. Galbūt jūs matėte siaubo filmus, kur paveikslų pavadinimai patys atrodė išnyks bet dim-tamsiame fone. Pabandykime atkurti bendrą pavyzdį kažką panašaus į tai.

Animuoti į siaubo filmų stiliaus tekstą

Tiesą sakant, visa idėja yra padaryti tekstą, kuriame raidės buvo šiek tiek miglota ir būtų suktis. Kuriame tarp raidžių turi būti tarpas. Mes naudoti interalphabetic atspalvį, taip pat intervalą. Siekiant įgyvendinti šią idėją, turime scenarijų Lettering.js autorystės Dave Rupert. Jis reikalingas, į kuriuos vyniojami žodžius plius keletas raides žyma trukmę. Pirmiausia jums reikia wrap h2 žymės frazę. Štai pavyzdys kodas.

į H2 žymeles žyma span tada obernom visi žodžiai.

Taip atsitinka, kaip šis.

Jis atrodys šiek tiek sudėtinga, tačiau neleiskite, kad nerimauti.

Manijos gauti pakankamą struktūrą.

Kaip rezultatas, mes turime kiekvienas iš mūsų esamų raidžių suvynioti į žymę trukmę. Jie pasirodė tikrai daug. Bet pavyzdys yra gana paprasta kodą aukščiau lėmė. visą jų struktūrą, galite rašyti sau, ir tai bus keli. Ji taip pat priklauso nuo to, kokios tekstą, kurį norite naudoti.

Galime daryti išvadą, kad mūsų darbas šiek tiek stilizuotas. Visi mūsų pavadinimai pirmiau pateiktame pavyzdyje, įsikurs visa ekrano plotį. Ir jie užims beveik visą turimą erdvę.

Kadangi mes ketiname dėti visas mūsų laiškų centre ekrane, tada, mūsų konteineryje, o mes taip pat reikia Lanksčiojo lauko.

Čia yra jo kodas pavyzdys.

Dabar mes padarėme taip, kad visi laiškai, kurie suvynioti į span class, kuri priklauso patronuojančiai klasės .os frazių, įsikurs ir bus prie jos viduryje.

Nepamirškite pridėti laisvos vietos tiek, kad pati raidė tarpai.

Šiuo atveju pirmasis įvynioti norėtų turėti tam tikras papildomas savybes. Šis viešbutis perspektyva. Tai leis mums įsitikinti, kad ši svetainė bus kaip išsiskirti, ateiti į pirmą vietą.

Patys kaip ir mūsų laiškus bus skaidri, ir mes pradės animacija asortimentą už juos kažkur 5.2 sekundes. Žemiau - pavyzdys kodas.

Taip pat svarbu nustatyti, kaip ir su tuo, ką vėlavimas bus rodomas mūsų sakinius ir frazes. Kuris iš dalių tekstas bus rodomas greičiau nei ankstesnės, ir kiek. Kodas atrodys taip.

Duokime mažą, bet labai įdomų efektą. Priglausti 0,2 neskaidrumą. taip Interalphabetic atstumas bus gana didelis. Laiškai bus pasukti už kelių ašies Y pamatyti, taip pat vartotojai savo svetainę bus tik maža dalis šių laiškų. Be to, nereikia pamiršti, kad iš tekstinio šešėlis savybių poveikį. Pusė animacija, mes padarėme neįprastas dalykas. Mes turime nukreips raides save, o taip pat sumažinti atstumą, kuris yra tarp jų, ir tada didinti neskaidrumo ir po povernom ženklų apie 0 ašies Y

Galų gale, mes vėl įlašinti kelis laiškus arba nykstančių promasshtabiruem juos. Tai suteiks naują mažą blur efektą.

Ir pagaliau paskutinis sakinys CSS animacija.

Ir taip, pagaliau pridėti galutinį liesti. Mes daugiausia dėmesio bus skiriama kai kurių konkrečių žodžių. Jie turės paryškintas. Tai suteiks reikiamą dėmesio.

Nepamirškite apie įkvėpimo

Kai bandote eksperimentuoti sau savybes ir CSS animacija, pabandykite rasti įkvėpimo viskas kasdieniame gyvenime. Tai gali būti bet kas iš įdomų tinklalapius keletą nuostabių vaizdo efektas.

Be to, jei jūs neturite smalsauti, kaip vieną ar kitą efektą padaryti, ir bandyti iš naujo jį savo, jūs galite pasiekti puikių rezultatų. Arba bent jau, visada kažko išmokti daugiau apie galimybes programavimo kalba, kad jūs esate, iš tikrųjų, jį naudoti. Net ne visiškai supratau jūsų idėja gali pasirodyti labai įspūdingas.