Zure webgunerako 23 gezi animatu CSSn

Jarritako beste artikulu biribil batekin jarraitzen dugu dohainik lor ditzakegun elementu horien azentua codepen.io bezalako webguneetatik. Kodea CSS, HTML edo Javascript-en hartzeko balio handiko guneak dira eta, beraz, emaitza bikainak lortzen dira webgune baten alderdi bisualean; webgune honetara beste helburu batzuetara bultzatuko dugu ondo programatutako kodea ezarriz eta ideia sortzaileekin.

Hauek dira 23 CSS gezi animatu ezin hobeak direnak X proiektu tematikoaren taldearen aurretik edo erosketa eCommerce batean egin daitekeen espaziora arreta handiz pasatu nahi duen erabiltzailearen begirada zuzentzeko joera duten elementuetarako; funtsezkoak diren inbutuak sortu ahal izateko eta, horrela, gure merkataritza elektronikoan saltzen dugun produktu horren bihurketa handiagoa lortzeko.

Animaziozko CSS geziak

Geziak CSS animatua alboko korritze batekin 23 serieko CSS gezi animatuen lehen lagina direnak. Efektu sinplea emaitza bisual bikainak dituzten eta esandakoa baino haratago doazen gezientzat.

Gezi animatua

a gezia svg-n saguaren erakuslea gainean dugunean animazio egokia eta kalitatezkoa lortuko du. Mugimendu zirkular batean web elementu garrantzitsu hau webgune askorentzat nabarmenduko dugu.

Geziaren animazioa

CSS eta HTML formatuan animazio bat gezi baten eraldaketa sinplea modernoagoa klasikoagoa izateko. Akabera ona eta nahiko erraza duen gezi batentzako animazio hau baino ez.

Gezien animazioak

Urtean gezi animatu sorta posizio eta mugimendu desberdinak. Mugimendua laterala da geziak webgunean hartzen duen espazioa nabarmentzen duen "pasatzean" osatzen duten gezientzat.

Geziaren esteka

A inguratu zirkulua saguaren erakuslea ikono honen gainean uzten dugunean. Ondo kudeatutako animazio nahiko sinplea da, baina mezu hau partekatzen ari garen gainerako efektu bikaina da Creativos Online-n.

Gezi hirukoitzeko animazioa

SVG irudi batean oinarrituta, Hemen duzu irudi formatu mota honi eskainitako webgune batzuk, a hiruretara eramaten duen animazio hirukoitza hasierako geziak bakar batean. Zure webguneari beste efektu bikaina, ukitu profesionala ematen diona.

CSS gezi sinplea goialdera itzultzeko

Hau gezi sinplea CSSn webgunearen hasierara itzultzeko lana du. Hasierako eta amaierako abiadurako bihurgune astuna, lehen begiratuan animazio txukuna eta sinplea osatzen duten arren, aurrekoak bezalako kutsu profesionala ematen duen arren.

Gezi elastikoa

Hau gezi elastikoa nabarmentzen da klik egitean edo sakatzen baduzu, errebote efektua sortuko du ikonoa dagoen esferan. Aitortu behar dugu batez ere JavaScript-en oinarritutako gezi bat dela.

Gezia SVG animazioarekin

Zure zain dagoen SVG gezia utzi erakuslea beherantz Desplazamendu efektua ager dadin eta kolorea gorrira aldatzeko, adibidean ematen dena behintzat, orduan gure gustura eta zaletasunarekin pertsonalizatzea izango da kontua.

CSS Chevron geziak

CSS gezi nahiko erraza kolore aldaketarekin okertzen denean. A gezirik oinarrizkoenak, baina kalitate falta eta beste hainbeste bezala espero zen ukitu hori.

Gezia svg

Trantsizio efektua ikonoaren pisuan edo «pisuan», kasu honetan gezi bat sarrera honetako protagonista gisa. Geziaren pisua handitu besterik ez duzu CSS oinarritutako oinarrizko efektuarekin.

Gezituta

Un gezi esperimentua horietan barietate ona aurkitzen dugu div eta sasi elementuekin sortutako berezitasunarekin.

CSS gezi hutsak

Beste aberasten duten gezi mota zerrenda, nahiz eta hemen CSS eta HTML formatuan sortzeaz gain nabarmentzen garen.

CSS gezi makurra

Eman nahi bazenu efektu kurbatua marraztuta bezala eskuz, CSSko gezi hau aproposa da horretarako.

Gezia

CSS trantsizioak dituen gezia gezi baten desintegrazio efektua aipatutako irudia marrazten duten hainbat iruditan.

Hiru geziak batean

Animazio delikatua lortu hiru geziak bat bihurtzea. Bila ditzakegun eta bere kodea dugun efektu horietako bat, gure lanean edo webgunean nahi dugun moduan erabil dezagun.

CSS korritze animazio hutsa

Animazio bat modu infinitua bestea handienak direnean besteari protagonismoa hartzeko pasatzen uzten dioten gezi sorta batena. Akabera bikainarekin, gezi ezin hobea bihurtzen da sareko norabidea jarraitzera bultzatzeko.

SCSS gezi animazioa

Another animazio infinitu nahiko sinplea eta beste gezi bati bidea emateko lausotzen da eta horrela oso "begizta" berezi bat lortzen da.

Gooey gezi animazioa

Gezi zerrenda honetan ikusitako animazio guztien artean, zalantzarik gabe bitxienak eta sortzaileenak. Bertikalki korritzen ari den esfera ia zeharkatzen duen animazioa. Oso gomendagarria da erabiltzailea zure webgunera datorren harrituta uztea.

Animazioaren amaiera aldera

Animazio honek, aurrekoetan bezala, badu erabiltzaileari webgunearen amaieran orri-oinera pasatzeko. Gainerakoengandik nabarmentzen duen sormenezko animazioa du ezaugarri. Hobe codepen.io-ra estekatik ekintzan ikustea.

Geziaren ikono sinplea

Adierazitako moduan oso sinplea den ikonoa Animazio sinple batek osatzen du. Horrek ez du esan nahi Joshua MacDonaldek partekatutakoa bezalako kalitate kode baten aurrean gaudenik.

Errebote geziaren animazioa

Beste gezi bat errebote animazioa HTML eta CSS formatuan besteengandik desberdina izaten saiatzen dena. Zalantzarik gabe, demotik eskuratu eta esteka deskargatuko duzu.

Geziaren animazioa

CSS eta HTML geziaren beste animazio bat ondo «hunkituta» dago. Zure webgunerako 23 CSS gezien serie honetatik bereizten duen aberastasun handiena da.