Animeiddio CSS a'i bosibiliadau

Rhyfeddu sut i wneud animeiddiad CSS, mae llawer o ddefnyddwyr yn mynd i chwilio am y gwersi a chyfarwyddiadau. Ac er y gall cyfarwyddiadau o'r fath ar gael yma, ymhlith pethau eraill, rydym yn rhoi'r prif cyngor defnyddiol i chi yn y gwaith o animeiddio greu gan ddefnyddio CSS.

gyfrinach datblygu delfrydol

Cyngor y gellir ei roi i'r rhai sy'n dymuno gwybod yn llawn beth yw CSS animeiddio llyfn, fel a ganlyn. Pan fydd y arbrofion dyddiol gyda darnau parod o god ac yn ceisio cyflawni eu harbrofion eu hunain. Yn yr amser rhydd o'r gwaith ar eu safleoedd eu hunain, ceisiwch weld beth sy'n digwydd gyda'r plygu darn o god, i astudio'r hyn neu y eiddo yn llawn. Ceisiwch i weithredu pob math o syniadau diddorol gan ddefnyddio hollol wahanol arfau ieithyddol, a bydd animeiddiadau CSS yn agor i chi mewn ffordd newydd. Mae'r cyngor syml yw hyn - arbrofi i chi eich hun.

ymddangosiad CSS-animeiddio

Ac yn awr ar gyfer yr enghreifftiau diddorol. Fel rheol, y defnydd safonol o animeiddio yw newid rhai elfennau o'r safle yn raddol dros gyfnod o amser. Ond mae hyn yn rhy amlwg, yn tydi? Felly dyma ni rannu gyda chi yn ffordd eithriadol i ddefnyddio'r amser ymddangosiad animeiddio.

Mae'r ffaith y gall y newidiadau gwirioneddol i'r safle mewn darn o animeiddio neu yn ei gyfanrwydd fod bron yn ebrwydd. I wneud hyn, rydym yn gofyn unrhyw ddau keyframes, ond yn defnyddio ystod fach iawn. Er enghraifft, gall fod yn gyfartal i 0.001%. Yn yr achos hwn, gall animeiddio CSS ddigwydd yn syth. Mae'n berffaith ar gyfer efelychu arwydd neon. Bydd hyn yn arwydd Blink, ac os bydd y CSS animeiddio wedyn fod yn fwy tryloyw ac i ddefnyddio a nodwedd testun-cysgod, bydd yr arwydd bron fel y peth go iawn.

Dyma cod esiampl.

Gwella botymau swyddogaethol

Os byddwn yn ystyried y cwestiwn o beth fod yn anarferol botwm CSS-animeiddio, gellir dweud bod y botwm opsiynau addurn ar safleoedd set mawr. Ystyriwch un enghraifft. Effaith wasgu'r botymau amgrwm. Enghraifft cod - isod.

Gyda darn mor syml o bloc CSS animeiddio o god yn edrych yn eithaf da. Mae'n edrych yn ddiddorol iawn ac yn cael ei ddefnyddio yn aml ar hollol wahanol safleoedd.

CSS-animeiddio pan fyddwch yn hofran dros snippet safle

Mae'r safle deinamig a modern, yr hiraf mae'n parhau i fod ar y defnyddiwr. Yn ogystal, rôl bwysig hefyd yn cael ei chwarae gan ryngweithio. Mae hyn yn sicr yn wir, ond beth all helpu i wneud y safle mor rhyngweithiol â phosibl?

Yn dda iawn wedyn yn edrych i weithio gyda elfennau dylunio a darnau o safle pan fydd y llygoden. botymau Animeiddio pan fyddwch yn hofran y trafodwyd uchod, ond ar wahân i eich bod yn gallu "adfer" a gwahanol ddarnau o'r safle, gan eu gwneud y mwyaf ffasiynol. Fel gyda phopeth arall, y brif egwyddor yma - peidiwch â gorwneud hi.

Felly, mae yna eiddo pontio rhagorol, a all gymryd hyd at bedwar eiddo cysylltiedig.

Yn ystod rhai CSS-animeiddio amser pan fyddwch yn hofran dros y darn hwn o cod yn newid. Mae'r amser yn cael ei bennu gan yr eiddo hyd. Hynny yw, pan fyddwch yn hofran dros eitem mae'n dechrau newid rhyfedd unrhyw eiddo a bennwyd gennym yn y dewisydd. Yn ein hachos ni, mae'n - .element (pwynt ymlaen). Rhywfaint isod yn enghraifft o'r cod, pan fydd y newid o'r div cynhwysydd, sydd â'r .hover ffug, y cefndir yn newid o goch i wyrdd.

Pan fydd defnyddiwr yn hofran nad yw'r animeiddiad CSS llygoden yn newid ar unwaith, ond yn oedi gan rai ffracsiwn o eiliad, sy'n creu effaith diddorol.

Yn ogystal, os yn yr enghraifft flaenorol, gwnaethoch ofyn rheol sicr bod cefndir mewn elfen div ei newid o goch i wyrdd ac yn symud o fewn 0.4 eiliad, dylid nodi bod defnyddio'r pob gwerth, gallwch wneud cais i'r eiddo cyfan yn gwbl ar unwaith.

Enghraifft cod chynrychiolaeth fel a ganlyn.

Fel y dangosir yn eiddo padin ac effaith pontio cefndir yn digwydd sydd yn eiddo pontio benderfynol. Dylech nodi y gallwch bennu set benodol gyda chomas rhyngddynt o werthoedd.

Rhai arlliwiau o ddefnyddio'r math hwn o animeiddio ar fotymau

Mewn egwyddor, yn y pen draw nid yw mor bwysig ym mha drefn y bydd yn cael ei nodi ac yn trosglwyddo i'r gwerthoedd data. Ac eithrio mewn un achos. Gallwn ddelio â'r eiddo oedi. Yn yr achos hwn, mae angen i ni nodi hyd ac amser. Mewn geiriau eraill, bydd angen y cod i ni i ddweud pa mor hir y mae'r angenrheidiol iawn i ni y bydd oedi yn digwydd.

Gan gadw mewn cof na all rhai eiddo fod effaith pontio. Hynny yw, ni allant fod yn fyrhoedlog. Mae hyn oherwydd y ffaith na ellir eu hanimeiddio.

animeiddio testun

Gyda chymorth y cod gellir eu gosod a thestun CSS animeiddio gwych. Gall hyn fod rhyw fath o erthygl, a theitl mawr, teitl y safle. Fel y soniwyd uchod, y prif beth - peidiwch â gorwneud hi a pheidiwch â throi eich safle i mewn i safle tirlenwi, a fydd yn edrych yn rhad.

Wel, gadewch i ni geisio darganfod beth CSS animeiddio o destun, ac yn creu ei, a chysgodion testun. Efallai eich bod wedi gweld ffilmiau arswyd, lle mae enwau'r paentiadau eu hunain yn ymddangos i diflannu ar unrhyw gefndir dim-tywyll. Gadewch i ni geisio ail-greu esiampl cyffredinol o rywbeth fel hyn.

Animeiddio testun yn arddull ffilmiau arswyd

Mewn gwirionedd, mae'r holl syniad yw gwneud y testun y mae'r llythyrau ychydig yn amwys ac y byddai'n cylchdroi. Wherein rhwng llythrennau ddylai fod yn ofod. Byddwn yn defnyddio cysgod interalphabetic, yn ogystal â'r egwyl. Er mwyn gweithredu'r syniad, mae angen sgript Lettering.js awduraeth Dave Rupert. Roedd arno angen i lapio geiriau yn ogystal â rhai o'r llythrennau yn y rhychwant tag. Yn gyntaf bydd angen i chi lapio yr ymadrodd yn tag h2. Dyma cod esiampl.

Yna obernom geiriau i gyd mewn tagiau h2 yn y rhychwant tag.

Mae'n digwydd fel hyn.

Bydd yn edrych braidd yn feichus, ond peidiwch â gadael i hynny trafferthu.

Manic cael strwythur digonol.

O ganlyniad, mae gennym bob un o'n llythyrau presennol lapio mewn cyfnod tag. Maent yn troi allan 'n sylweddol llawer. Ond mae'r enghraifft yn eithaf syml yn y cod uwchben y arwain. Mae eu strwythur cyfan, gallwch ysgrifennu eich hun, a bydd yn ychydig yn fwy. Mae hefyd yn dibynnu ar ba fath o destun rydych am ei ddefnyddio.

Rydym yn dod i'r casgliad ein gwaith arddullaidd ychydig. Mae ein holl deitlau yn yr enghraifft uchod, yn cael eu lleoli yn y lled cyfan y sgrin. A byddant yn cymryd bron pob un o'r gofod sydd ar gael.

Ers i ni yn mynd i roi ein holl lythyrau sy'n canolbwyntio ar y sgrin, ac yna, ar gyfer ein cynhwysydd ac rydym hefyd angen flexbox.

Dyma enghraifft o'i cod.

Nawr rydym wedi gwneud fel bod yr holl lythyrau, sy'n cael eu lapio mewn span class, a oedd yn perthyn i'r dosbarth rhiant .os-ymadroddion, yn cael eu lleoli a bydd yn cael ei ynghlwm wrtho yn y canol.

Peidiwch ag anghofio ychwanegu ychydig o le am ddim, sydd ei hun bylchiad llythyren.

Yn yr achos hwn, bydd y deunydd lapio cyntaf hoffi cael eiddo ychwanegol penodol. Mae'r persbectif eiddo. Bydd yn ein galluogi i wneud yn siŵr y bydd y safle yn debyg i sefyll allan, yn dod i'r amlwg.

Bydd eu hunain fel ein llythyrau fod yn dryloyw, a byddwn yn lansio amrywiaeth o animeiddio ar eu cyfer yn rhywle yn 5.2 eiliad. Isod - Enghraifft cod.

Mae hefyd yn bwysig i benderfynu sut a gyda beth oedi yn ymddangos ein frawddegau ac ymadroddion. Pa un o'r rhannau o'r testun yn ymddangos yn gyflymach na'r un blaenorol, a faint. Bydd y cod yn edrych fel hyn.

Gadewch inni roi effaith fach ond yn ddiddorol iawn. Rhowch y anhryloywder 0.2. bellter Interalphabetic Bydd felly fod yn eithaf mawr. Bydd llythyrau hefyd yn cael eu cylchdroi ar gyfer nifer o Y. echel Welwn ni chi, yn ogystal â dim ond rhan fach o'r llythyrau hyn, bydd defnyddwyr ar eich safle fod. Hefyd, peidiwch ag anghofio i roi effaith o briodweddau testun-cysgod. Hanner animeiddio, rydym yn gwneud beth anarferol. Rydym byddwn yn cyfeirio'r llythyrau eu hunain, a hefyd i leihau'r pellter sydd rhyngddynt, ac yna cynyddu didreiddedd, ac ar ôl yr arwyddion povernom ar 0 ar gyfer Y. echel

Yn y diwedd, rydym unwaith eto yn ychwanegu ychydig o lythyrau neu mewn perygl yn eu promasshtabiruem. Bydd hyn yn rhoi effaith hysmotyn bach newydd.

Ac yn olaf y cymal olaf CSS-animeiddio.

Ac ie, yn olaf ychwanegwch y cyffwrdd terfynol. Byddwn yn canolbwyntio ar rai geiriau penodol. Bydd ganddynt wyneb beiddgar. Bydd hyn yn rhoi'r pwyslais angenrheidiol.

Peidiwch ag anghofio am ysbrydoliaeth

Pan fyddwch yn ceisio arbrofi eich hun gyda'r eiddo ac animeiddio CSS, ceisiwch ddod o hyd ysbrydoliaeth ym mhopeth mewn bywyd bob dydd. Gall hyn fod yn unrhyw beth o dudalennau gwe diddorol i ryw effaith fideo gwych.

Yn ogystal, os nad ydych yn pry, sut i wneud hyn, neu effaith honno, ac yn ceisio ail-greu ar eu pen eu hunain, gallwch gyflawni canlyniadau gwych. Neu, o leiaf, bob amser yn dysgu rhywbeth mwy am y posibiliadau o iaith raglennu eich bod yn, mewn gwirionedd, yn ei ddefnyddio. Efallai na fydd hyd yn oed yn gwireddu'n llawn eich syniad yn dda profi i fod yn ysblennydd iawn.