CSS Animation ug mga posibilidad sa iyang mga

Naghunahuna kon sa unsang paagi sa paghimo sa animation CSS, daghang mga tiggamit moadto sa pagpangita sa mga leksyon ug mga instruksiyon. Ug bisan pa ang maong mga mga panudlo nga makita dinhi, sa taliwala sa ubang mga butang, kami magahatag kaninyo sa mga nag-unang mapuslanong tambag sa paglalang sa animation gamit ang CSS.

sulundon nga tinago nga development

Tambag nga mahimong ihatag ngadto sa mga tawo nga gusto nga masayud sa bug-os unsa ang usa ka hapsay nga animation CSS, mao ang sama sa mosunod. Sa diha nga ang adlaw-adlaw nga mga eksperimento uban sa andam nga mga piraso sa code ug naningkamot sa pagtuman sa ilang kaugalingon nga mga eksperimento. Sa panahon nga libre gikan sa trabaho sa ilang kaugalingong mga dapit, sa pagsulay sa pagtan-aw kon unsa ang mahitabo sa pagkiyugpos sa usa ka piraso sa code, sa pagtuon niini o kabtangan nga sa bug-os nga. Sulayi sa pag-implementar sa tanan nga mga matang sa makapaikag nga mga ideya sa paggamit sa usa ka bug-os nga lain-laing mga himan sa pinulongan, ug CSS animation moabli alang kanimo sa usa ka bag-ong paagi. Kining yano nga tambag mao kini - eksperimento alang sa imong kaugalingon.

CSS-animation panagway

Ug karon alang sa makapaikag nga mga panig-ingnan. Ingon sa usa ka pagmando sa, ang sumbanan nga paggamit sa animation mao ang pag-usab sa pipila ka mga elemento sa site sa hinay-hinay sa panahon. Apan kini mao ang kaayo dayag, dili ba? Busa dinhi kami sa pagpakigbahin uban kaninyo sa usa ka talagsaon nga paagi sa paggamit sa panahon sa sa dagway sa animation.

Ang kamatuoran nga ang aktuwal nga mga kausaban ngadto sa dapit sa usa ka piraso sa animation o sa iyang kinatibuk-mahimong hapit dayon. Sa pagbuhat niini, kita pangayoon sa bisan unsa nga duha ka keyframes, apan sa paggamit sa usa ka gamay kaayo nga range. Pananglitan, tingali kini mahimong katumbas sa 0,001%. Sa kini nga kaso, CSS animation mahitabo diha-diha dayon. Kini mao ang hingpit alang sa simulating sa usa ka neon ilhanan. ilhanan Kini mokihol, ug kong ang animation CSS unya nga mas transparency ug sa paggamit ug bahin text-landong, ang ilhanan kabubut-on hapit sama sa tinuod nga butang.

Ania ang usa ka panig-ingnan code.

Sa pagpalambo sa mga operatiba buton

Kon atong ikonsiderar ang pangutana sa unsa mahimong talagsaon nga button CSS-animation, kini mahimong miingon nga ang button dekorasyon mga kapilian sa mga dapit dako nga set. Tagda ang usa ka panig-ingnan. Ang epekto sa dinalian sa convex buton. Panig-ingnan code - ubos.

Uban sa ingon nga sa usa ka yano nga piraso sa animation CSS block sa code motan-aw pretty maayo. motan-aw niini nga makapaikag ug sa kasagaran nga gigamit sa bug-os nga lain-laing mga dapit.

CSS-animation sa diha nga hover kamo sa usa ka site Snippet

Ang dynamic ug modernong site, ang na kini nagpabilin sa user sa. Dugang pa, ang usa ka importante nga papel ang nanaghoni usab sa interactivity. Kini mao ang sa pagkatinuod tinuod, apan unsa ang makatabang sa paghimo sa dapit nga ingon sa interactive kutob sa mahimo?

Maayo kaayo unya pagtan-aw sa buhat sa uban sa disenyo nga mga elemento ug mga tipik sa site sa diha nga sa mouse. buton Animation sa diha nga hover kamo atong gihisgotan sa ibabaw, apan gawas sa nga kamo makahimo sa "pagpabuhi" ug nagkalain-laing mga bahin sa site, sa paghimo kanila sa labing estaylis. Sama sa tanan, ang mga nag-unang baruganan dinhi - dili overdo kini.

Busa, adunay usa ka maayo kaayo nga kabtangan transisyon, nga mahimo ngadto sa upat ka mga may kalabutan sa mga kabtangan.

Atol sa usa ka pipila ka mga panahon sa CSS-animation sa diha nga hover kamo sa niini nga piraso sa code mausab. Ang panahon gitinguha sa sa gidugayon kabtangan. Kana mao, sa diha nga naglupadlupad kamo sa usa ka butang nga kini nagsugod sa usa ka talagsaon nga kausaban sa bisan unsa nga kabtangan nga gibutang kita sa selector. Sa atong kahimtang kini mao ang - .element (punto sa unahan). Ingon nga sa ubos mao ang usa ka panig-ingnan sa mga code, sa diha nga ang transisyon gikan sa sudlanan div, nga ang mini .Hover,-usab ang background gikan sa pula nga sa lunhaw.

Sa diha nga ang user mouse CSS animation dili mausab diha-diha dayon, apan nalangan sa pipila tipik sa usa ka ikaduha, nga nagmugna sa usa ka makapaikag nga epekto.

Dugang pa, kon sa miaging panig-ingnan, nga kamo nangutana ang usa ka lagda nga background sa usa ka div elemento nausab gikan sa pula nga sa lunhaw ug lakang sa sulod sa 0.4 ka segundo, kini kinahanglan nga nakita nga ang paggamit sa bili sa tanan, ikaw mahimo nga paghangyo sa tibuok tibuok kabtangan diha-diha dayon.

Panig-ingnan code girepresentahan ingon sa mosunod.

Ingon sa gipakita sa mga kabtangan padding ug background transisyon epekto mahitabo nga mao ang determinado transisyon kabtangan. Ikaw kinahanglan nga timan-i nga kamo makahimo sa hingalan sa usa ka comma-gilain sa usa ka hugpong sa mga prinsipyo.

Ang ubang mga nuances sa paggamit niini nga matang sa animation sa buton

Sa baruganan, sa kadugayan kini dili importante kaayo sa unsa nga order nga bungat ug gibalhin sa mga mithi data. Gawas sa usa ka kaso. Kita-atubang sa mga paglangan kabtangan. Sa kini nga kaso, kita kinahanglan nga hingalan sa gidugayon ug sa panahon. Sa lain nga mga pulong, kinahanglan kita sa code sa pagsulti sa unsa nga paagi dugay ang mga gikinahanglan kanato sa usa ka paglangan mahitabo.

Bug-sa hunahuna nga ang pipila ka mga kabtangan dili mahimo nga ang epekto sa kausaban. Nga mao, nga dili sila mahimong lumalabay. Kini mao ang tungod sa kamatuoran nga sila dili animation.

text animation

Uban sa tabang sa mga code mahimong sa ug maayo kaayo nga animation CSS teksto. Kini mahimo nga sa pipila ka mga matang sa artikulo, ug sa usa ka mayor nga titulo, titulo site. Sumala sa gihisgotan sa ibabaw, ang nag-unang butang nga - dili overdo kini ug ayaw sa imong site ngadto sa usa ka landfill, nga tan-awon barato.

Aw, ang ni mosulay sa pagpangita kon unsa ang CSS animation sa teksto, ug sa paghimo niini, ug mga anino nga teksto. Tingali imong nakita makahahadlok nga mga salida, diin ang mga ngalan sa mga painting sa ilang mga kaugalingon daw mangalaya sa bisan unsa nga lubog na-mangitngit nga background. ni mosulay sa recreate usa ka kinatibuk-ang panig-ingnan sa usa ka butang nga sama niini Himoa.

Kinabuhi sa teksto sa estilo sa makahahadlok nga mga salida

Sa pagkatinuod, ang tibuok nga ideya mao ang paghimo sa teksto diin ang mga sulat sa usa ka gamay nga klaro ug tuyok. Diin sa taliwala sa mga sulat kinahanglan nga usa ka luna. Kita sa paggamit sa interalphabetic landong, ingon man ang mga sal. Aron sa pagpatuman sa ideya, kita kinahanglan sa usa ka script Lettering.js awtor Dave Rupert. Siya gikinahanglan sa wrap pulong plus sa pipila ka mga sulat sa gitas-on sa tag. Una nga kamo kinahanglan nga wrap sa hugpong sa mga pulong diha sa H2 tag. Ania ang usa ka panig-ingnan code.

Unya obernom ang tanan nga mga pulong sa H2 tags sa gitas-on sa tag.

Kini mahitabo nga sama niini.

Kini motan-aw ingon og hasol, apan ayaw itugot nga ang magsamok.

Manic makabaton igong gambalay.

Ingon sa usa ka resulta, kita sa matag usa sa atong mga kasamtangan nga mga sulat nga giputos sa usa ka gitas-on sa tag. Sila mibalik gikan gayud sa usa ka daghan. Apan ang panig-ingnan mao na yano sa code sa ibabaw sa miresulta. Ang ilang bug-os nga gambalay, nga imong mahimo sa pagsulat sa imong kaugalingon, ug kini mahimo nga usa ka pipila ka dugang nga. Kini nag-agad usab sa unsa nga matang sa text nga imong gusto sa paggamit sa.

taposon nato ang atong buhat sa usa ka gamay nga stylized. Ang tanan nga sa atong mga titulo sa panig-ingnan sa ibabaw, nga nahimutang sa sa tibuok gilapdon sa sa screen. Ug sila dad-a ang hapit sa tanan nga mga anaa nga luna.

Tungod kay kita sa pagbutang sa tanan sa atong mga mga sulat nasentro sa screen, nan, alang sa atong sudlanan ug kita usab kinahanglan flexbox.

Ania ang usa ka panig-ingnan sa iyang code.

Karon kita gibuhat aron nga ang tanan nga sa mga sulat, nga giputos sa usa ka gitas-on sa klase, nga iya sa ginikanan klase .os-hugpong sa mga pulong, nga nahimutang ug nga gilakip sa kini sa tunga-tunga.

Ayaw kalimot aron sa pagdugang sa usa ka gamay sa libre nga luna, nga mao ang sa iyang kaugalingon nga sulat gilay-on.

Sa kini nga kaso, ang unang wrapper kon gusto ka nga sa pipila ka dugang nga mga kabtangan. Kini nga kabtangan panglantaw. Kini motugot kanato sa pagsiguro nga ang kini nga site mahimong sama sa pagtindog sa gawas, moabut sa atubangan.

Sa ilang mga kaugalingon ingon nga ang atong mga mga sulat mahimong transparent, ug kita maglunsad og usa ka-laing mga animation alang kanila dapit sa 5.2 segundos. Ubos - sa panig-ingnan code.

Kini usab nga importante aron sa pagtino kon sa unsang paagi ug uban sa unsang paglangan makita sa atong mga tudling-pulong ug mga hugpong sa mga pulong. Hain sa mga bahin sa teksto makita mas paspas pa kay sa sa miaging usa ka, ug sa unsa nga paagi daghan. code ang motan-aw sama niini.

Atong paghatag sa usa ka gamay nga apan kaayo makapaikag nga epekto. Ibutang ang opacity sa 0,2. Interalphabetic gilay-on sa ingon mahimong dako. Mga sulat usab nga rotated sa pipila axis Y. Tan-awa kamo, ingon man sa mga tiggamit sa imong site mahimong usa lamang ka gamay nga bahin sa niini nga mga mga sulat. Usab, ayaw kalimot sa paghatag sa epekto sa mga kabtangan sa teksto-landong. Katunga sa animation, nga atong gihimo sa usa ka talagsaon nga butang. Kita kita sa pagdumala sa mga sulat sa ilang mga kaugalingon, ug usab sa pagpakunhod sa gilay-on nga anaa sa taliwala kanila, ug unya sa pagdugang sa opacity, ug human sa povernom mga ilhanan sa 0 alang sa axis Y.

Sa katapusan, kami pag-usab makadugang sa usa ka pipila ka mga sulat o namiligro promasshtabiruem kanila. Kini mohatag bag-o nga gamay nga gisagulan epekto.

Ug sa katapusan sa katapusan nga hugpong sa mga pulong CSS-animation.

Ug oo, sa katapusan sa pagdugang sa mga katapusan nga paghikap. Kita-focus sa pipila ka piho nga mga pulong. Sila makabaton sa usa ka nawong. Kini mohatag sa gikinahanglan nga empasis.

Ayaw kalimti ang mahitungod sa inspirasyon

Kon kamo mosulay sa eksperimento sa imong kaugalingon uban sa mga kabtangan ug sa CSS animation, sa pagsulay sa pagpangita sa inspirasyon sa tanang butang sa matag adlaw nga kinabuhi. Kini mahimong bisan unsa nga butang gikan sa usa ka makapaikag nga mga panid sa web sa pipila maanindot nga video nga epekto.

Dugang pa, kon kamo dili manghilabot, sa unsa nga paagi sa pagbuhat niini o nga epekto, ug naningkamot sa recreate niini sa ilang kaugalingon, nga kamo mahimo sa pagkab-ot sa dako nga mga resulta. O, sa labing menos, sa kanunay sa pagkat-on sa usa ka butang nga labaw pa mahitungod sa mga posibilidad sa programming pinulongan nga kamo, sa pagkatinuod, sa paggamit niini. Dili bisan sa bug-os nga nakaamgo sa imong ideya mahimong mapamatud-an nga kaayo nindot.