Ho hlahisa CSS le likarolo tsa eona

Ha ba botsa ho etsa lihlahisoa tsa CSS, basebelisi ba bangata ba fumana lithuto le litaelo. Le hoja u tla fumana litaelo tse tšoanang mona, har'a tse ling, re tla u fa keletso e ka sehloohong ea ho etsa lipapali ho sebelisa CSS.

Sephiri sa liqapi tse ntle

Keletso e ka sehloohong e ka fanoang ho ba batlang ho ithuta ka botlalo, ke efe papiso e boreleli ea CSS, ke ena. Ka liteko tsa letsatsi le leng le le leng ka likaroloana tse entsoeng hantle, leka ho itlhahloba. Ka nako e se nang mosebetsi libakeng tsa hau, leka ho bona se etsahalang ha u kenya khoele e le 'ngoe kapa e' ngoe, ho ithuta setša ka botlalo. Leka ho sebelisa mehopolo ea mefuta eohle e thahasellisang ka lithulusi tsa puo tse fapaneng, 'me pono ea CSS e tla u bulela ka lehlakore le lecha. Keletso ena e bonolo ke e latelang - itlhahlobe.

CSS ponahalo ea lipapali

'Me joale a re feteleng mehlala e thahasellisang. Ka tloaelo, tšebeliso e tloaelehileng ea lipapali ke ho fetola likarolo tse ling tsa setša hantle ka nako. Empa sena ke tse ling haholo, ha u nahane? Kahoo, mona re tla arolelana le uena tsela e sa tloaelehang ea ho sebelisa nako ea ponahalo ea animation.

'Nete ke hore liphetoho tsa sebele setšeng ka karolo ea lipapali kapa ka foromo e feletseng li ka ba hang-hang. Bakeng sa sena re abela liforeimi tse peli tsa bohlokoa, empa re sebelisa nako e nyane haholo. Ka mohlala, e ka lekana le 0.001%. Tabeng ena, setšoantšo sa CSS se ka etsahala hang-hang. Sena se phethahetse bakeng sa ho etsisa pontšo leha e le efe ea neon. Letšoao lena le tla phatsima, 'me haeba tlhahiso ea CSS e sa ntse e sebelisa ka mokhoa o hlakileng le setša sa moriti, letšoao le tla ba joaloka la sebele.

Mohlala oa mohlala ke ona.

Ho ntlafatsa tshebetso ea dikonopo

Haeba re nahana ka potso ea hore na tlhahiso ea CSS ea mofuta o ka tloaelehang hakae , joale re ka re ho na le likhetho tse ngata bakeng sa li-buttons tsa ho khabisa liwebsaeteng. A re tšohleng mohlala o le mong. Phello ea konopo ea khatello ea khatiso. Mohlala oa khoutu o ka tlase.

Ka khoutu ena e bonolo, papiso ea CSS e tla bonahala e le ntle. E shebahala e thahasellisa ebile e atisa ho sebelisoa libakeng tse fapaneng tse fapaneng.

CSS-animation ha u tsamaea ka sekhahla sa sebaka

Sebaka se matla le sa morao-rao sa mohala, ha motho a se a lula ho sona. Ho phaella moo, ho sebelisana ha li-interactivity ho boetse ho phetha karolo ea bohlokoa. Ha e le hantle, sena ke 'nete, empa ke eng e ka thusang hore sebaka seo se kopane hamolemo?

Ponahalo e ntle haholo e sebetsa ka moqapi oa likarolo le likarolo tsa sebaka sa hau ha u phunya mouse. Ho bina ha li-buttons ha u ntse u tsitsitse, re hlohlelitse ka holimo, empa ho phaella moo, o ka "hlasimolla" le mefuta eohle ea likarolo tsa setša, ho etsa hore e be mokhoa o motle ka hohle kamoo ho ka khonehang. Joalokaha ho na le ntho e 'ngoe le e' ngoe, molao-motheo o ka sehloohong mona hase oa ho feta.

Kahoo, ho na le thepa e ntlehali ea phetoho, e ka nkang thepa e 'ngoe e amanang le eona.

Ka nako e itseng, CSS-animation ha u e-ea holim'a karolo ena ea khoutu e tla fetoha. Nako e khethoa ke nako ea thepa. Ka mantsoe a mang, ha u phahama holim'a ntho e itseng, e qala ho fetola ka tsela e sa tloaelehang thepa eo re e botsitseng ho khethi. Bakeng sa nyeoe ea rona sena ke .element (letheba le tlang pele). Ka tlaase mona ke mohlala oa khoutu eo ha o fetoha ho tloha setsing sa div se nang le .hover palo ea maqheka, mokokotlo oa fetoha ho tloha ho khubelu ho ea ho o motala.

Ha o hula mouse ea mosebetsing, pono ea CSS ha e fetohe hang-hang, empa ka ho lieha ha karolo ea motsotsoana, e leng se etsang hore e be le phello e thahasellisang.

Ho phaella moo, haeba mohlala o fetileng o boletse molao oa hore karolo ea div div e lokela ho fetoha ho tloha bofubelu ebe o ea botala bakeng sa metsotsoana 0.4, o lokela ho nahana hore ho sebelisa bohlokoa bohle, o ka bolela mohaho oohle ka kakaretso Hang-hang.

Mohlala oa mohlala ke o latelang.

Joalokaha ho bontšoa, thepa ea marang-rang le ea mokokotlo e tla ba le phello ea phetoho, e khethiloeng ke thepa ea phetoho. O lokela ho hlokomela hore o ka hlakisa sekhetho se itseng sa litekanyetso tse arohaneng le li-commas.

Metsotsoana e seng mekae ea ho sebelisa mofuta ona oa lipapali ho li-buttons

Ha e le hantle, ka kakaretso, ha e bohlokoa hakaalo ka tatellano eo melao-motheo ena e tla bontšoa ka eona 'me e ngotsoe. Ntle le nyeoe e le 'ngoe. Re ka sebetsana le ho lieha ha thepa. Tabeng ena, re lokela ho bonts'a bolelele ba nako. Ka mantsoe a mang, re tla hloka ho fana ka khoeli hore na nako eo re e hlokang e tla etsahala nako e kae.

Hopola, leha ho le joalo, hore thepa e meng e ke ke ea ba le phello ea phetoho. Ke hore, ha ba khone ho fetoha. Sena se bakoa ke taba ea hore ba ka 'na ba hlola ba e-ba teng.

Mongolo oa lipapali

Ka thuso ea khoutu e ka behoa le pono e babatsehang ea temana ea CSS. Ena e ka 'na ea e-ba sehlooho se seng,' me sehlooho se seholo, sehlooho sa sebaka seo. Joalokaha ho se ho boletsoe ka holimo, ntho e ka sehloohong mona ke hore u se ke ua e fetela le hore u se ke ua etsa hore sebaka sa hau e be letšolo le tla shebahala le theko e tlaase.

A re ke re leke ho fumana hore na papiso ea CSS ke efe, mme e e bōpe le ho ngola litšoantšo. Mohlomong u bone lifilimi tse tsosang takatso tseo mabitso a litšoantšo ka bobona a neng a bonahala a senyeha ka morao-rao. A re ke re leke ho etsisa ntho e tšoanang ka mohlala o tloaelehileng.

Tšoaea litšoantšo ka mokhoa oa libaesekopo tse tšosang

Ha e le hantle, mohopolo oo ke ho ngola temana eo mangolo ao a neng a tla fofa hanyenyane ebe aa e fetola. E tlameha ebe ho na le sebaka pakeng tsa mangolo. Re tla sebelisa moriti oa li-inter-letter, hammoho le nako. E le hore re phethe khopolo ena, re hloka Lettering.js script ka Dave Rupert. Ho hlokahala ho koahela mantsoe le litlhaku ho li-tag tse 'maloa tsa span. Ntlha ea pele, u tlameha ho koahela lipolelo ka lebokose la h2. Mohlala oa mohlala ke ona.

Ebe u koahela mantsoe ohle mantsoeng a h2 ka tag ea span.

Ho tla etsahala joalo.

E tla bonahala e le boima, empa u se ke ua hlajoa ke lihlong ka eona.

Fumana mohaho o motle oa masene.

Ka lebaka leo, re koahela e 'ngoe le e' ngoe ea litlhaku tseo re nang le tsona lebokoseng la nako. E ile ea e-ba ngata haholo. Empa ka khoutu e ka holimo, mohlala o bonolo haholoanyane. U ka ngola mohaho oohle ka boeena, 'me o tla ba o moholoanyane. E itšetlehile ka hore na ke mangolo ao u tla a sebelisa.

Qetella mosebetsi oa rona ka mokhoa o monyenyane oa ho ngola. Bohlooho bohle ba rona ho mohlala o ka holimo bo tla ba ka bophara bo feletseng ba skrine. 'Me ba tla lula hoo e batlang e le sebaka se sa lefelloeng.

Kaha re tla beha mangolo ohle a rona bohareng ba skrine, bakeng sa setshelo sa rona re boetse re hloka flexbox.

A re fe mohlala oa khoutu ea hae.

Hona joale re entse joalo e le hore mangolo ohle a koahetsoeng ka sehlopha sa bobeli, se leng sa lihlopha tsa motsoako oa motsoali, li tla fumanoa 'me li tla ts'oaroa hantle bohareng.

U se ke ua lebala ho eketsa sebaka se itseng sa mahala, ke hore, lengolo-lengolo le leng le le leng le arohanang le lona.

Tabeng ena, sekoahelo sa pele se tla ba le thepa e itseng e eketsehileng. Sebaka sena ke pono. E tla re lumella hore re e etse e le hore karolong ena e tsoe, e hlahelle.

Mangolo a tšoanang a rona a tla ba a hlakileng, mme re tla matha nako ea lipapali bakeng sa bona kae-kae metsotsoana e 5.2. Ka tlaase mona ke mohlala oa mohlala.

Hape ke habohlokoa ho fumana hore na ke eng e liehang litlhoko tsa rona le lipoleloana. Karolo efe ea temana e tla hlaha ka potlako ho feta e fetileng, le hore na e kae. Khoutu e tla shebahala joaloka ena.

Re tla fana ka phello e nyane, empa e le ea bohelehele haholo. Beha ho khoneha ho 0,2. Lengolo la lengolo le tla ba leholo haholo. Mangolo a tla boela a fetohe ka lehlakoreng la Y axis. Uena le basebelisi ba sebaka sa hau ba tla bona karolo e nyenyane feela ea mangolo ana. Hape u se ke ua lebala ho fana ka katleho ho thepa ea moriti oa litemana. Karolo ea lipapali, re tla etsa ntho e sa tloaelehang. Re tla ntlafatsa mangolo ka bobona, hape re fokotsa sebaka se pakeng tsa bona, ebe re eketsa opacity, mme re fetisetsa matšoao ho 0 haufi le Y axis.

Qetellong, re tla eketsa mangolo a nyamelang hape 'me re tla e bala. Sena se tla boela se fane ka phello e fokolang e nyenyane.

'Me qetellong polelo ea ho qetela ea CSS-animation.

Ee, qetellong u kenye letsoho la ho qetela. Re tla lebisa tlhokomelo mantsoeng a itseng a tobileng. Ba tla ba le letšoao la mafura. Sena se tla fana ka boitsebiso bo hlokahalang.

U se ke ua lebala ka mehloli ea pululelo

Ha o leka ho leka lits'ebeletso tsa CSS le litšoantšo, leka ho fumana ts'usumetso linthong tsohle bophelong ba letsatsi le letsatsi. E ka ba ntho leha e le efe, ho tloha leqepheng le thahasellisang la websaeteng ho hlahisa phello e ntle ea video.

Ho phaella moo, haeba u sa hlahlobe hore na sena kapa seo se etsahetse joang, 'me u leke ho se pheta hape, u ka finyella liphello tse kholo. Kapa, bonyane, kamehla ithute ho hong ho eketsehileng ka bokhoni ba puo ea lenaneo eo ue sebelisang. Esita le khopolo eo u sa e sebeliseng ka botlalo e ka sebetsa haholo.