CSS animasie en sy moontlikhede

Wonder hoe om animasie te maak CSS, baie gebruikers gaan op soek na lesse en instruksies. En al sulke instruksies kan hier gevind word, onder andere, ons sal julle die belangrikste nuttige advies te gee in die skepping van animasie met behulp van CSS.

Die geheim van volmaakte ontwikkeling

Advies wat gegee kan word aan diegene wat wil ten volle weet wat is 'n gladde animasie CSS, is soos volg. Wanneer die daaglikse eksperimente met voorbereide stukke kode en probeer hul eie eksperimente uit te voer. In die tyd vry van werk op hul eie webwerwe, probeer om te sien wat gebeur met die vou van 'n stukkie van die kode, om hierdie of daardie eiendom te bestudeer ten volle. Probeer om alle vorme van interessante idees te implementeer met behulp van 'n heeltemal ander taal gereedskap, en CSS animasies sal oopmaak vir jou in 'n nuwe manier. Hierdie eenvoudige raad is hierdie - eksperiment vir jouself.

CSS-animasie voorkoms

En nou vir die interessante voorbeelde. As 'n reël, die standaard gebruik van animasie is 'n paar elemente van die webwerf geleidelik met verloop van tyd verander. Maar dit is ook voor die hand liggend, is dit nie? So hier is ons deel met jou 'n buitengewone manier om die tyd van die voorkoms van animasie gebruik.

Die feit dat die werklike veranderinge aan die werf in 'n stuk van animasie of in sy geheel byna oombliklike kan wees. Om dit te doen, vra ons enige twee complete beelde, maar gebruik 'n baie klein reeks. Byvoorbeeld, kan dit gelyk aan 0.001% wees. In hierdie geval, kan CSS animasie dadelik gebeur. Dit is ideaal vir simuleer 'n neonlig. Hierdie teken sal knip, en indien die animasie CSS dan meer deursigtigheid sal wees en om kenmerk teks-skaduwee gebruik en sal die teken amper soos die ware jakob.

Hier is 'n voorbeeld kode.

Die verbetering van die funksionele knoppies

As ons kyk na die vraag van wat ongewoon mag wees CSS-animasie knoppie, kan dit gesê word dat die knoppie versiering opsies op terreine groot stel. Oorweeg 'n voorbeeld. Die effek van die druk op die konvekse knoppies. Byvoorbeeld kode - hieronder.

Met so 'n eenvoudige stuk animasie CSS blok kode sal baie goed lyk. Dit lyk baie interessant en word dikwels gebruik op heeltemal verskillende plekke.

CSS-animasie wanneer jy hover oor 'n terrein brokkie

Die dinamiese en moderne webwerf, hoe langer dit bly op die gebruiker. Daarbenewens is 'n belangrike rol speel ook deur interaktiwiteit. Dit is seker waar, maar wat kan help om die site as interaktiewe as moontlik te maak?

Goed dan kyk om te werk met ontwerpelemente en fragmente van die werf toe die muis. Animasie knoppies wanneer jy hover ons hierbo bespreek, maar afgesien van wat jy kan "herleef" en verskeie stukke van die terrein, wat hulle tot die mees aantreklike. Soos met alles anders, die belangrikste beginsel hier - oordoen dit nie.

So, daar is 'n uitstekende oorgang eiendom, wat kan tot vier verwante eienskappe.

Tydens 'n sekere tyd CSS-animasie wanneer jy hover oor hierdie stuk kode sal verander. Die tyd word bepaal deur die eiendom duur. Dit wil sê, wanneer jy hover oor 'n item begin dit 'n eienaardige verandering enige eiendom wat ons stel in die selector. In ons geval is dit - .element (punt vorentoe). Ietwat onder is 'n voorbeeld van die kode, wanneer die oorgang van die houer div, wat die pseudo .hover het, die agtergrond verander van rooi na groen.

Wanneer 'n gebruiker hang die muis CSS animasie nie dadelik verander, maar vertraag deur 'n paar fraksie van 'n sekonde, wat 'n interessante effek skep.

Verder, as in die vorige voorbeeld, vra jy 'n sekere reël dat agtergrond in 'n div element verander van rooi na groen en beweeg binne 0.4 sekondes, dit moet kennis geneem word dat die gebruik van die hele waarde, kan jy aansoek doen om die hele eiendom is ten volle onmiddellik.

Monster-kode in die volgende manier.

Soos getoon in eiendomme padding en agtergrond oorgang effek sal plaasvind wat is vasbeslote oorgang eiendom. Jy moet daarop let dat jy 'n deur kommas geskei 'n sekere stel waardes kan spesifiseer.

Sommige nuanses van die gebruik van hierdie tipe van animasie op knoppies

In beginsel, in die lang termyn is dit nie so belangrik in watter volgorde sal gespesifiseer word en oorgedra word na die datawaardes. Behalwe in een geval. Ons kan gaan met die vertraging eiendom. In hierdie geval, ons moet spesifiseer die duur en tyd. Met ander woorde, ons moet wees in die kode te vertel hoe lank dit nodig sal wees om ons is dieselfde vertraging.

Hou in gedagte dat kan 'n paar eienskappe nie die effek van oorgang wees. Dit wil sê, kan hulle nie verbygaande wees. Dit is te wyte aan die feit dat hulle nie kan geanimeerde.

teks animasie

Met die hulp van die kode kan ingestel word en 'n uitstekende animasie CSS teks. Dit kan 'n soort van artikel, en 'n groot titel, site titel wees. Soos hierbo genoem, die belangrikste ding - oordoen dit nie en moenie jou site nie te omskep in 'n stortingsterrein, wat goedkoop sal kyk.

Wel, laat ons probeer om uit te vind wat CSS animasie van teks, en skep dit, en teks skadu. Dalk het jy horror movies, waar die name van die skilderye self gelyk te vervaag op enige dowwe-donker agtergrond gesien. Kom ons probeer om te skep 'n algemene voorbeeld van iets soos hierdie.

Animeer die teks in die styl van horror films

Eintlik is die hele idee is om die teks waarin die briewe was 'n bietjie vaag en sou draai te maak. Waarin tussen letters moet 'n ruimte wees. Ons sal interalphabetic skaduwee, sowel as die interval gebruik. Met die oog op die idee te implementeer, moet ons 'n script Lettering.js outeurskap Dave Rupert. Hy wat nodig is om woorde plus 'n paar letters draai in die tag span. Eerstens moet jy die frase in h2 tag draai. Hier is 'n voorbeeld kode.

Dan obernom al die woorde in h2 tags in die tag span.

Dit gebeur so.

Dit sal lyk ietwat omslagtig, maar moenie toelaat dat dit die moeite.

Kry 'n besetene genoeg struktuur.

As gevolg hiervan, het ons elkeen van ons bestaande briewe toegedraai in 'n tag span. Hulle blyk regtig 'n lot. Maar die voorbeeld is nogal eenvoudig in die kode bokant die gevolg gehad. Hul hele struktuur, kan jy jouself te skryf, en dit sal nog 'n paar wees. Dit hang ook af van watter soort teks wat jy wil gebruik.

Ons sluit ons werk 'n bietjie gestileerde. Al ons titels in die voorbeeld hierbo, sal gevestig word in die hele breedte van die skerm. En hulle sal opneem byna al die beskikbare ruimte.

Sedert ons gaan plaas al ons briewe gesentreer op die skerm, dan, vir ons houer en ons flexbox moet ook.

Hier is 'n voorbeeld van sy kode.

Nou het ons gedoen sodat al die briewe, wat toegedraai in 'n span class, wat deel uitmaak van die ouer klas .os-frases, sal gevestig word en sal in die middel om dit aangeheg word.

Moenie vergeet om 'n bietjie van die vrye ruimte te voeg, wat op sigself brief spasiëring.

In hierdie geval, sal die eerste wrapper graag sekere bykomende eienskappe. Hierdie eiendom perspektief. Dit sal ons in staat stel om te verseker dat hierdie site soos sal wees om uit te staan, na vore kom.

Hulself as ons briewe sal deursigtig wees, en ons sal 'n verskeidenheid van animasie vir hulle iewers te begin in 5.2 sekondes. Onder - byvoorbeeld kode.

Dit is ook belangrik om te bepaal hoe en met watter vertraging ons sinne en frases sal verskyn. Wat van die dele van die teks vinniger as die vorige een sal verskyn, en hoeveel. Die kode sal soos volg lyk.

Laat ons 'n klein, maar baie interessante effek gee. Plaas die dekking van 0,2. Interalphabetic afstand sal dus nogal groot wees. Briewe sal ook nie gedraai word vir 'n paar as Y. Sien jy, sowel as gebruikers van jou webwerf sal slegs 'n klein deel van hierdie briewe word. Moet ook nie vergeet om die effek van die eienskappe van teks-skaduwee gee. Helfte animasie, het ons 'n ongewone ding. Ons sal ons die briewe self te rig, en ook om die afstand wat tussen hulle te verminder, en dan verhoog die ondeursigtigheid, en nadat povernom tekens op 0 vir as Y.

Op die ou end, het ons weer by die letters verdwyn en verskeie promasshtabiruem hulle. Dit sal 'n nuwe klein vervaag effek gee.

En uiteindelik die laaste frase CSS-animasie.

En ja, uiteindelik die finale touch voeg. Ons sal fokus op 'n paar spesifieke woorde. Hulle sal 'n dapper gesig het. Dit gee die nodige klem.

Moenie vergeet van inspirasie

As jy probeer om jouself te eksperimenteer met die eienskappe en CSS animasie, probeer om inspirasie in alles in die alledaagse lewe te vind. Dit kan enigiets van 'n interessante webblaaie om 'n paar wonderlike video effek wees.

Daarbenewens, as jy nie loer, hoe om dit of dat effek doen, en probeer om dit te herskep op hul eie, jy kan goeie resultate bereik. Of, ten minste, altyd leer iets meer oor die moontlikhede van die programmeringstaal wat jy is, in werklikheid, gebruik dit. Nie eens ten volle besef jou idee mag wel bewys baie skouspelagtige te wees.