Tusaalooyinka Animation CSS

css-animations

Xigasho: PC World

Dunida animations ayaa aad u joogta maalin kasta, waxaa jira barnaamijyo badan oo naga caawiya inaan abuurno daabacado fiidiyoow ah oo faahfaahsan. Haddii aadan weli aqoon CSS, waxaa la gaaray waqtigii aad bilaabi lahayd inaad barato naftaada oo aad ogaato wax kasta oo la samayn karo.

Laakiin maadaama aynaan doonayn inaan faahfaahinno, waxaan kuu soo bandhigeynaa qoraal ay ka buuxaan animations, qaar badan oo iyaga ka mid ah ayaa buuxiya shaqo gaar ah, kuwa kale ayaa si fudud loogu talagalay in lagu maaweeliyo oo lagu maaweeliyo. Maqaalkan, waxaan ku tusineynaa qaar ka mid ah animations CSS ugu fiican Intaa waxaa dheer, waxaan ku tusineynaa barnaamijyo kale oo xiiso leh halkaas oo aad ka sii wadi karto safarkaaga naqshadeeye ama naqshadeeye animation.

CSS

CSS waxa lagu qeexaa sida a nooc ka mid ah kheyraadka inta badan si weyn loogu isticmaalo qaybta naqshadeynta boggaga internetka. Taasi waa, waa taxane codes oo loogu talagalay in lagu fuliyo hawlaha qaarkood. Haddii aad taqaano ereyga HTML, hubaal waxaad ogaan doontaa ereyga CSS, sababtoo ah waxay ku socdaan gacanta oo labaduba waa laba tiir oo aasaasi ah abuurista iyo horumarinta ilo kale oo badan oo internetka ah.

Si aad si fiican u fahamto, waxaa jira habab hore loo qorsheeyay oo aad ka bilaabi karto tafatirkooda oo aad ku abuuri karto boggaaga internetka. Laakin haddii waxa aad rabto ay tahay in aad wax ka bedesho ciwaanka isku xirka ama isku xirka boggaaga, waxa ay noqon doontaa lagama maarmaan in la isticmaalo koodhadhka qaar oo ay tahay in barnaamije kastaa ogaado.

Astaamaha guud

  • Inkasta oo jaleecada hore ay u muuqato in HTML iyo CSS ay isku mid yihiin, maahan. HTML-ka waxaad ku wareejin kartaa oo aad qaybin kartaa macluumaadka aad u baahan tahay ama aad ka rabto boggaaga internetka. Dhanka kale, CSS, waxa aad ogolaatay waa nidaamka mid kasta oo ka mid ah boggaga aad naqshadaynayso. Nama waa isku mid laakiin sidaan kor ku soo sheegnay, labaduba waa laba tiir oo aasaasi u ah horumarinta boggaga internetka.
  • Dabeecadda CSS waa in loo isticmaali karo daalacashada badan, ma laha qaab dhisan, laakiin luqaddeedu waa mid caalami ah oo sidoo kale ku habboon dhammaan qalabka la heli karo. Tani waxay fududaynaysaa shaqada mar haddii aan loo baahnayn nooc kordhin, in ka yar barnaamijka.
  • Sida sidoo kale lagu tilmaamay, Waa qalab fiican haddii waxa aad rabto in aad naqshadayso oo sidan wax ka beddel ama u beddel dhinac kasta oo ka mid ah is-dhexgalka boggaaga internetka. Tani waxay ka timid farta iyo codadka labadaba, taas oo ah, Waxaad haysataa fursado balaadhan oo kala duwan.
  • Way fududahay in la maareeyo oo waxaa jira codes horay loo dejiyay si looga bilaabo aduunka horumarinta qaabkan, waxay qaadanaysaa sanado badan oo ku celcelin ah laakiin CSS Waxay leedahay saldhig bilow ah oo aad ku abuuri karto animations-kaaga ugu horreeya oo aad dareento sidii naqshadeeye bogga shabakadda. Intaa waxaa dheer, waa nidaam u furan qof kasta oo raba inuu bilaabo horumarinta mashaariicda ugu horreeya. Marka la soo koobo, haddii waxa aad raadinayso ay tahay inaad ka gudubto qaab-dhismeedka ama abuuraha bogga shabakadda, CSS waxaad ku bilaabi kartaa tacaburkaaga.

tusaalooyin animation

Dodecahedron

dodecahedron

Xigasho: Webdesign

Dodecahedron waa animation uu sameeyay animator Wontem. Animation-ku wuxuu ku salaysan yahay in gebi ahaanba lagu abuuray CSS halkaas oo nashqada dodecahedron-wareegaya lagu muujiyo asal madow oo xoojinaya iftiinkeeda. Faahfaahin kale oo lagu xisaabtamayo ayaa ah saamaynta lagu dabaqay shaxanka.

Waxa inta badan lagu garto animation-kani waa inuu leeyahay dareen gaar ah oo ah inuu noqdo naqshad saddex-cabbir ah, taas oo xitaa aad u xiiso badan. Shaki la'aan waa animation aad u fiican haddii waxa aad jeceshahay ay tahay adduunka 3D oo aad ku ciyaareyso mugga walxaha.

goblin animated

goblin animated

Xigasho: Web Design

Animation-kan waxaa cinwaan looga dhigay goblin animated waxaana sameeyay nashqadeeyaha Avaz Bokiev, shaki la'aan waa taxane yar oo mid ka mid ah jilayaasha caanka ah ee xilligii ciyaarta fiidiyowga, Mario Bros.

Waa qaab animation loo yaqaan joojinta-dhaqdhaqaaqa sida ay ugu ciyaarto dhaqdhaqaaqa jihada iyada oo loo marayo taxane gaaban. Shaki la'aan, waa animation xiddig ah oo helaya dhammaan aqoonsiga haddii aad tahay qof jecel Mario Bros. Waa mid ka mid ah animations ugu fiican ee lagu abuuray CSS.

Kaamiro sawir leh

Sawir qaade

Xigasho: Web Design

Animation-kan aadka u wanaagsan waxa uu leeyahay kamarad sawir leh. Waa animation uu sameeyay Damiem Pereira iyo waxay u ogolaataa kamaradu inay ku ekaato sawir qaadida kaliya adigoo riixaya badhanka. Waa animation xiiso leh haddii aad jeceshahay adduunka sawir-qaadista oo aad u baahan tahay qayb ka mid ah boggaaga internetka oo midan sida tan.

Arinta xiisaha leh ee ku saabsan animation-kan ayaa ah in aad dhigi karto sawirka aad rabto oo kamaradu waxa ay tusi doontaa marka aad riixdo badhanka. Shaki la'aan waa mid ka mid ah animations-yada hal-abuurka leh ee loogu talagalay CSS.

nidaamka qoraxda biyo-dhac

nidaamka qoraxda

Xigasho: Web Design

Animation-kan ku saabsan nidaamka qoraxda waxaa sameeyay Tady Walsh, halkaas oo ay ku muujinayso qaab yar ama jilitaanka nidaamkayaga qorraxda. Waa animation aad u fiican maadaama aad arki karto sida mid kasta oo meerayaasha ka mid ahi ay ugu socdaan xawaare kala duwan. 

Waa mid ka mid ah animations ugu macquulsan uguna yaabka badan. Waxa laga yaaba in aad xiiso u yeelato haddii aad ka shaqeyso dunida cilmiga xiddigiska ama aad taageere u tahay caalamka iyo meereheeda. Waa qeexitaan, waa animation u qaata abaalmarinta mid ka mid ah kuwa ugu fiican uguna yaabka badan.

star wars animation

star wars animation

Xigasho: Web Design

Haddii aad jeceshahay Star Wars ma seegi kartid animation-kan uu sameeyay Donovan Hutchinson. Waa shaki la'aan animation leh saameyn gaar ah oo ku saabsan cinwaanka caanka ah ee Star Wars saga. Waxyaabaha la yaabka leh ee ku saabsan animation-kan ayaa ah sida uu ugu ciyaaray dhaqdhaqaaqa xarfaha kala duwan.

Shaki la'aan waa mid ka mid ah animations xiddigaha tan iyo markii ay tixgelisay mid kasta iyo mid kasta oo ka mid ah walxaha khayaaliga ah ee ay sagadu bixiso: galaxies, nalalka LED, asalka mugdiga ah iyo xarfo cajiib ah.

Intaa waxaa dheer, saameynta dhaqdhaqaaqa sidoo kale waa mid aad u guuleysata oo soo jiidata dareenka badan ee daawadayaasha.

Codsiyada si loo abuuro animations

Adobe Spark

Adobe Spark waa aalad qayb ka ah Adobe oo mas'uul ka ah abuurista animations cajiib ah oo sidaas darteed samaynta muuqaallo firfircoon oo aan dhammaad lahayn. Waxa soo jiidanaya dareenka qalabkan oo aan shaki ku jirin in uu yahay qodob ku habboon in uu diyaar u yahay aaladaha mobilada, tablet-yada iyo kumbuyuutarrada. Sidoo kale, haddii aad raadinayso inaad abuurto waxyaabo tayo leh boggaaga internetka, waa qalabka ugu fiican, maadaama ay leedahay kumanaan qaab-qurxin ah oo aad u rogi karto booskaaga meel soo jiidasho leh oo aad soo booqato.

Muuqaalka Muuqaalka

Waa mid ka mid ah codsiyada xiddigaha haddii aad tahay sawir-qaade oo aadan weli garanaynin sida loo bixiyo nolosha sawiradaada, mahadsanid qalabkan, waxaad awoodi doontaa inaad bixiso maroojin mashaariicdaada farshaxan iyo sidoo kale, waxaad noqon doontaa awood u leh in uu mid kasta oo ka mid ah sawiradaada ku sameeyo halkaas. Hagaag, waxay leedahay xirmo dhamaystiran oo burush ah, qalimaan talooyin kala duwan, midabyo kala duwan oo si caddaalad ah u ballaaran iyo sidoo kale waxaad haysataa ikhtiyaarka ah inaad sameyso sawir-gacmeedyadaada hordhaca ah ee ugu horreeya, shaki la'aan waa waxa aad u baahan tahay inaad ku bilowdo adduunka animation iyada oo loo marayo shuqulladaada. Isku day oo ha ku waarin rabitaanka.

Synfig studio

Synfig waa mid ka mid ah barnaamijyada ugu fiican ee lagu abuuro animations 2D. Waa mid ka mid ah aaladaha muhiimka ah haddii aad jeceshahay adduunka animation-ka qaabka ugu saafisan ee Disney. Synfig, waxa kale oo aad haysataa burushyo kala duwan oo kala duwan, filtarrada iyo xitaa saamaynta aad ku dabaqi karto sawiradaada.

Sidoo kale, haddii aad taageere u tahay 2D ma lumin kartid fursadda aad ku tijaabin karto barnaamijkan noocaan ah, maadaama ay bixinayaan suurtagalnimada dhaqdhaqaaqa iyo nolosha sawiradaada. Haddii aad hore ula soo shaqeysay vectors, markaa barnaamijkani kuma noqon doono mid ka duwan ama kugu adag.

Premiere Pro

Premiere Pro waa qalab kale oo muhiim ah oo ku jira xirmada Adobe. Waa mid ka mid ah barnaamijyada aadka loo isticmaalo ee ay adeegsadaan tifaftirayaasha fiidiyoowga ah ee xirfadleyda ah iyo istuudyo badan oo animation ah. Premiere waxaad ku abuuri kartaa animations-kaaga ugu horreeya oo waxaad ka heli kartaa saamaynta badan ee ay ku jirto.

Intaa waxaa dheer, haddii aad tahay bilawga qaybta maqal-muuqaalka, waxay leedahay casharro yaryar oo ku bari doona interface-keeda oo kuu ogolaanaya inaad ku qaadato maskaxdaada iyo dhinacaaga ugu hal-abuurka badan.

Waxaa loo heli karaa Android iyo iOS labadaba. Ciladda kaliya ayaa ah in aysan ahayn codsi bilaash ah, waxay u baahan tahay kharash yar.

Gabagabo

Abuuritaanka animations ee CSS waa mid aad u fudud, waxa kaliya ee ay tahay inaad sameyso waa inaad barato oo aad dhiirigeliso kuwa qaybtan ku jiray sanado badan. Sida aad arki karto, waxaa jira animations badan oo jira, waxaa intaa dheer in ay jiraan naqshadeeyayaasha kale oo isticmaala ilo aad u badan oo shaqeynaya, sida naqshadeynta qashinka caanka ah ee Windows ee qaabka diyaarad halkaas oo ay ku socoto dhammaan desktop-ka oo meesha ka saaraysa waxa. ma rabtaan.

Marka la soo koobo, waxaa jira fikrado iyo garaad badan oo la naqshadeeyay, laakiin hadda waa markii aad bilaabi lahayd barnaamij-samaynta iyo horumarinta animations-kaaga ugu horreeya ee CSS.


Noqo kuwa ugu horreeya ee faallo bixiya

Ka tag faalladaada

cinwaanka email aan la daabacin doonaa. Beeraha loo baahan yahay waxaa lagu calaamadeeyay la *

*

*

  1. Masuul ka ah xogta: Miguel Ángel Gatón
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.