CSS Fjör og möguleikar hennar

Ertu að velta Hvernig á að gera hreyfimyndir CSS, fara margir notendur í leit að kennslustundum og leiðbeiningar. Og þó svo leiðbeiningar má finna hér, meðal annars, munum við gefa þér helstu gagnlegar ráðleggingar í sköpun fjör nota CSS.

tilvalið þróun leyndarmál

Ráð sem hægt er að gefa þeim sem vilja vita fullkomlega hvað er slétt fjör CSS, er sem hér segir. Þegar tilraunir daglega með tilbúnum stykki af kóða og reyna að framkvæma eigin tilraunir sínar. Í tímanum frjálsa frá vinnu á eigin vefsvæði þeirra, reyna að sjá hvað gerist með leggja saman stykki af kóða, til að rannsaka þetta eða þessi eign að fullu. Reyna að innleiða alls konar áhugaverðum hugmyndum með alveg mismunandi verkfæri tungumál, og CSS fjör mun opna fyrir þér á nýjan hátt. Þessi einfalda ráð er þetta - tilraun til sjálfur.

CSS-fjör útlit

Og nú fyrir áhugaverðum dæmum. Sem reglu, staðlaða notkun fjör er að breyta einhverjum þáttum á síðuna smám saman með tímanum. En þetta er of augljóst, er það ekki? Svo hér við deila með ykkur ótrúlega leið til að nota tíma útliti fjör.

Sú staðreynd að raunveruleg breyting til the staður í a stykki af fjör eða í heild sinni getur verið nánast tafarlaus. Til að gera þetta, biðjum við einhverjar tvær keyframes, en nota mjög lítið úrval. Til dæmis kann að vera jafn 0.001%. Í þessu tilviki, CSS fjör getur gerst þegar í stað. Það er tilvalið fyrir að líkja eftir Neon skilti. Þetta tákn blikka, og ef fjör CSS verður þá að vera meira gagnsæi og að nota og lögun texta-skugga, tákn mun nánast eins og the raunverulegur hlutur.

Hér er dæmi númer.

Bæta hagnýtur hnappa

Ef við lítum á spurninguna um hvað gæti verið óvenjulega CSS-fjör hnappinn, það má segja að við skreytinga hnappinn á vefsvæðum stór sett. Lítum á eitt dæmi. Áhrif ýta kúpt hnappa. Dæmi númer - neðan.

Með slíkri einfaldri stykki af fjör CSS kóðanum mun líta nokkuð vel. Það lítur mjög áhugavert og er oft notað á alveg mismunandi stöðum.

CSS-fjör þegar þú sveima yfir staðnum bút

The dynamic og nútíma staður, því lengur sem hún er enn á notanda. Að auki er mikilvægt hlutverk er einnig leikið með gagnvirkni. Þetta er vissulega satt, en það getur hjálpað til við að gera síðuna eins gagnvirk og mögulegt er?

Mjög vel þá líta að vinna með hönnun frumefni og brot úr vef þegar mús. Fjör hnappar þegar þú sveima við ræddum hér að ofan, en fyrir utan að þú getur "endurlífga" og ýmsir stykki af the staður, sem gerir þá mest stílhrein. Eins og með allt annað, meginreglan hér - ekki ofleika það.

Svo, það er frábært umskipti eign, sem getur tekið allt að fjóra tengjast eiginleikum.

Á ákveðnum tíma CSS-fjör þegar þú sveima yfir þessu stykki af kóða mun breytast. Tíminn er ákvarðað með lengd hótelinu. Það er, þegar þú sveima yfir hlut og það byrjar sérkennileg breyting hvaða eign sem við setjum í val. Í okkar tilviki er það - .element (liður áfram). Nokkuð neðan er dæmi um kóða, þegar umskipti frá gámur div, sem hefur falsaður .hover, breytist bakgrunnurinn úr rauðu í grænt.

Þegar notandi svífur músin CSS fjör breytist ekki strax, en seinkað sumum broti úr sekúndu, sem skapar áhugaverð áhrif.

Að auki, ef í fyrra dæmi, bað þig ákveðna reglu sem bakgrunnur í div frumefni var breytt úr rauðu í grænt og færa í 0,4 sekúndur, það skal tekið fram að með því að nota gildi allt, getur þú höfða til allrar öllu hótelinu strax.

Dæmi númer fulltrúa sem hér segir.

Eins og sést á eignir padding og bakgrunni umskipti áhrif mun eiga sér stað, sem er staðráðinn umskipti eign. Þú ættir að huga að þú getur tilgreint aðskilin með kommum ákveðið sett af gildum.

Sumir blæbrigði að nota þessa tegund af fjör á hnappa

Í meginatriðum, þegar til lengri tíma litið og það er ekki svo mikilvægt í hvaða röð verður að tilgreina og flutt til gögn gildi. Nema í einu tilfelli. Við getum tekist á við töf hótelinu. Í þessu tilfelli, þurfum við að skilgreina lengd og tíma. Með öðrum orðum, við þurfum kóða til að segja hversu lengi mjög nauðsynlegt fyrir okkur að tefja mun eiga sér stað.

Með það í huga að sum eiginleika getur ekki verið áhrif umskipti. Það er, að þeir geta ekki verið skammvinn. Þetta er vegna þess að þeir geta ekki verið líflegur.

Texti fjör

Með the hjálpa af the merkjamál geta vera stilla og framúrskarandi fjör CSS texta. Þetta kann að vera einhvers konar greinar og stórt titill, staður titill. Eins og getið er hér að framan, aðalatriðið - ekki ofleika það og snú ekki á síðuna þína í urðunarstað, sem mun líta ódýr.

Jæja, við skulum reyna að finna út hvað CSS fjör texta, og búa hana til, og texti skuggar. Kannski þú hefur séð horror bíó, þar sem nöfn verkanna sjálfir virtust hverfa hvenær dim-dökkum bakgrunni. Við skulum reyna að endurskapa almenna dæmi um eitthvað svona.

Hreyfimynd texta í stíl horror bíó

Raunverulega, the heild Hugmyndin er að gera textann þar sem bréf voru svolítið óljós og vildi snúa. Þar sem á milli stafina ætti að vera pláss. Við munum nota interalphabetic skugga, auk bilið. Í því skyni að hrinda í framkvæmd hugmynd, þurfum við handrit Lettering.js höfundi Dave Rupert. Hann þurfti að vefja orð auk nokkra stafi í merkjaritlinum haf. Fyrst þú þarft að vefja setningu í h2 tag. Hér er dæmi númer.

Þá obernom öll orðin í h2 tags í merkjaritlinum span.

Það gerist svona.

Það mun líta nokkuð fyrirferðarmikill, en ekki láta það trufla.

Manic fá nægilega byggingu.

Þess vegna höfum við hvert núverandi bréfum vafinn í tag haf. Þeir reyndist mjög mikið. En dæmið er alveg einfalt í númerið hér að ofan er leitt. spilaborgin þeirra, getur þú skrifað sjálfur, og það verður nokkrar fleiri. Það veltur einnig á hvers konar texta þú vilt nota.

Við ályktum starf okkar svolítið stílfærð. Allar titla okkar í dæminu hér að ofan, verður staðsett í öllu breidd skjásins. Og þeir munu taka upp nánast allt plássið.

Þar sem við erum að fara að setja alla stafina okkar miðju á skjánum, þá fyrir ílát okkar og við þurfum líka flexbox.

Hér er dæmi um kóða þess.

Nú höfum við gert það að allir stafirnir, sem eru vafinn í span class, sem tilheyrir foreldris .os setninga, verður staðsett og verður fest við það í miðju.

Ekki gleyma að bæta við smá laust pláss, það er sjálft bréf bil.

Í þessu tilviki, í fyrsta umbúðir langar til að hafa ákveðin fleiri eiginleika. Þessi eign sjónarhorni. Það verður að leyfa okkur að ganga úr skugga um að þessi síða mun vera eins og að standa út, koma til rúms.

Sig sem bréfum verður að vera gagnsæ, og við munum ráðast á úrval af fjör fyrir þá einhvers staðar á 5,2 sekúndum. Hér að neðan - dæmi númer.

Það er einnig mikilvægt að ákvarða hvernig og með hvaða töf mun birtast setningar okkar og setningar. Hver af þeim hlutum textans mun birtast hraðar en fyrri, og hversu mikið. The merkjamál vilja líta svona út.

Leyfðu okkur að gefa lítið en mjög áhugaverð áhrif. Setja ógagnsæi 0,2. Interalphabetic fjarlægð þannig verður alveg stór. Letters Einnig verður snúið fyrir nokkrum ás Y. Sjáumst, auk notendur á síðuna þína verður aðeins lítill hluti af þessum bréfum. Einnig má ekki gleyma að gefa áhrif á eiginleika texta-skugga. Half hreyfimyndir, gerði við óvenjulega hlutur. Við munum beina stafina sig, og einnig til að draga úr fjarlægð sem er á milli þeirra, og þá auka ógagnsæi, og eftir povernom merki um 0 til axis Y.

Að lokum, bæta við aftur nokkra stafi eða hættu promasshtabiruem þá. Þetta mun gefa nýja litla óskýr áhrif.

Og að lokum síðasta setning CSS-fjör.

Og já, að lokum bæta endanlega snerta. Við munum leggja áherslu á nokkur ákveðin orð. Þeir munu hafa djörf andlit. Þetta mun gefa nauðsynlegar áherslu.

Ekki gleyma hugljómunum

Þegar þú reynir að gera tilraunir sjálfur við eiginleika og CSS fjör, að reyna að finna innblástur í öllu í daglegu lífi. Þetta getur verið allt frá áhugaverðum vefsíðum að einhverju skemmtilegu vídeó áhrif.

Þar að auki, ef þú pry ekki, hvernig á að gera þetta eða þessi áhrif, og reyna að endurskapa það á eigin spýtur, þú getur náð frábærum árangri. Eða, að minnsta kosti, alltaf að læra eitthvað meira um möguleika á forritunarmál sem þú ert í raun að nota það. Ekki einu sinni fullu hugmynd gæti vel reynst vera mjög fallegt.