Efatra an-tsoratra CSS 35 fanampiny ho an'ny tranonkalanao

Vokany nipoaka

Efa namoaka herinandro vitsivitsy lasa izay izahay andian-dahatsoratra an-tsoratra CSS ho an'ny manatsara ny fampisehoana ny lohateny H2 ny vokatra na ny lohatenin'ny fidirana serivisy izay amidy amin'ny tranokalan'ny mpanjifa. Ny vokatry ny soratra CSS izay afaka manome an'io kalitao tadiavinay hampiaiky volana ny mpanjifa io ary manana azy ireo ao anatin'ny portfolio-ny mandritra ny fotoana maharitra.

Miverina izahay miaraka amina lisitra lehibe iray hafa momba ny lahatsoratra CSS izay natokana manokana hanolotra tranokala amin'ny fomba tsara indrindra. vokatra, serivisy, pejy fandraisana na karazana lohahevitra hafa. 35 ny effets an-tsoratra izay tsy azonao adinoina hanehoana fa ny famolavolana tranonkala ankehitriny dia ao amin'ny ambaratonga tsara indrindra ary tsy azontsika atao ny tsy mahita ny fiaran-dalamby haharaka ireo endrika kanto indrindra ankehitriny.

Vokatry ny horonantsary mangina

Muda

Vokatry ny lahatsoratra manokana izay aseho ho tonga lafatra amin'ny karazana lohahevitra manokana. Amin'ny teny nalaina dia azo aseho izany mba hanazavana mazava fa mijery ny volavolan'ny tranokalanay na an'ny an'ny mpanjifa izahay.

Fampidirana lahatsoratra CSS tsy miangatra

Lahatsoratra tsy miangatra

Ity fidirana an-tsoratra CSS tsy misy fika ity dia manandrana mandrindra toy ny hoe ny lakilen'ny miafina amin'ny rojo vy. Fomba tena manaitra ny fampisehoana lahatsoratra ho an'ny tranonkala natokana ho an'ny lohahevitra manokana.

Cassie

Cassie

Una sary mihetsika amin'ny svg izany dia midika hoe lanja kely dia kely ho an'ny fampisehoana lahatsoratra iray izay niforona tamin'ny loko maro. Manaitra ny fisian'ity lahatsoratra ity izay mampiasa JavaScript ihany koa mba hanomezana ny marika tanteraka.

Lahatsoratra an-tsary

Lahatsoratra an-tsary

Ity lahatsoratra aloky ny sary mihetsika ity dia manana sentetika kanto manokana ary hafa noho ny ambin'ny lahatsoratra rehetra ao amin'ilay lisitra. Eto adinonay ny JavaScript mba haseho tsy misy afa-tsy kaody CSS.

Lahatsoratra Morph

Lahatsoratra Morph

Lahatsoratra mihetsika ao amin'ny JavaScript sy CSS manova cyclical misy loko neon vitsivitsy. Ho an'ireo tranonkala izay mainty na volondavenona ny lokony. Sarimiaina tena malefaka ho an'ny vokany hafa tanteraka.

Fanamaivanana ny lahatsoratra

Lahatsoratra mizara sarimiaina

Ity lahatsoratra ity dia nanjary manan-kery ho misehoa amin'ny sary mihetsika tena miloko. Izy io koa dia misy JavaScript. Amin'ny tsindry iray dia azonao atao ny mahita ny sarimiaina tratrarina ho an'ny valiny lahatsoratra tena liana.

 

Sarimiaina

Lahatsoratra onja mihetsika

Fihetsiketsehana ao anaty lahatsoratra miaraka amin'ny SVG. Iray amin'ireo teboka liana amin'ity ny vokany eo amin'ny sary dia eo amin'ny sary ambadika ary ny gradient mameno ny onja mba hampiavaka azy tsara.

Lahatsoratra Warp animated

Lahatsoratra Warp

Ny JavaScript kely dia nahatratra ny vokany izay ny litera tsirairay dia samy manana ny sanda habeny avy ka toa ny vita amin'ny taratasy fametaka taratasy samy hafa. Vokany lehibe ho an'ny lahatsoratra tena mamorona amin'ny fampisehoana.

Vokatry ny setroka

Vokatry ny setroka

Voka-tsetroka lehibe ho an'ny lahatsoratra iray manjavona tsikelikely hanjavona tanteraka. Izy io dia azo ampiasaina hanaparitahana na hanindriana ary hanafoanana ny lahatsoratra eo alohantsika. Tsy misy JavaScript ary kaody CSS kely dia kely.

Vokatry ny bubble

Vokatry ny bubble

Vokatry ny lahatsoratra jQuery izay mampiseho amintsika ny fomba famoronana azy ny vokan'ny bubble ao anaty lohateny HTML. Ny vokany dia ny fampipoahana ny miboiboika avy ao ambadiky ny lahatsoratra toy ny rano manjelanjelatra. Tena manaitra.

Lahatsoratra famenoana sarimiaina

Lahatsoratra fenoina sary

Vokatry ny sary mihetsika izay mameno ny endritsoratra miaraka amin'ny sary afara. Tsy mila JavaScript ary ny code CSS ihany no ifandraisany. Sarimiaina miadana sy malefaka be ho an'ny lahatsoratra izay ho tonga lafatra amin'ny lohahevitra manokana ho an'ny tranokala.

Sarimiaina an-tsoratra amin'ny CSS sy HTML

Lahatsoratra CSS madio

Sarimiaina an-tsoratra tsotra amin'ny CSS sy HTML izay mahatonga ny latsaka mitsangana ny teny avy any ambony. Adinonay eto ny JavaScript eto hamitaana sary mihetsika tsotra sy tsotra nefa tsy misy fonosana be dia be.

Sary an-tsoratra miloko

Lahatsoratra miloko

Eto dia alaina sary ilay lahatsoratra fiantraikany loko tena manaitra ary izany dia afaka manome ny naoty ho an'ireo olana mifandraika amin'ny fahatanorana na amin'ny fahatanorana. Banga ihany izy amin'ny farany, fa ny endritsoratra kosa dia lalaovin'ny andiana feo mavitrika.

Lahatsoratra mihetsika amin'ny SVG

Animated in SVG

Sarimiaina an'ny rariny ny iray segondra dia mamakivaky ny sary manontolo ny litera ny lahatsoratra mihetsika ao amin'ny SVG. Izy io dia manana kaody JavaScript kely mba hiarahana amin'ny CSS sy HTML.

Lahatsoratra aloka

Lahatsoratra aloka

Ny aloky an'ity lahatsoratra ity dia mamokatra ny vokany lalina amin'ny loko mamirapiratra izay saika mitovy amin'ny fivarotana mofomamy. Ny lesoka fotsiny dia ny tsy fanatsarana azy ho an'ny finday.

Montserrat

Montserrat

Sarimiaina CSS sy HTML izay mampiseho ny famoronana sy ny sasany loko manomboka amin'ny mavo sy mena. Ho an'ny fampiasana voafaritry ny fahaizan'ny sarimiaina momba ireo loko mandalo ny sarin'ny lahatsoratra.

Vokatry ny fipoahana

Vokany nipoaka

Vokatry ny lahatsoratra Nipoaka be dia be ny ampahany afaka miadana isika amin'ny alàlan'ny famelana ny totozy totozy handeha hamaky ny litera tsirairay mandrafitra ny teny. Vokatry ny soratra manintona ny maso sy manara-penitra izay mampiasa HTML, CSS ary JavaScript.

Vokatry ny onja

Wave lahatsoratra svg

Raha tsy misy JavaScript, dia afaka nametraka sary mihetsika izay tena mampihetsika ny sary ambadika amin'ny alàlan'ny fanaovana ny sary. Mitokona tsy misy fisalasalana ary misy vokany lehibe.

Sarimiaina GSAP

Sarimiaina GSAP

Toy ny amin'ny sarimihetsika maro, ny litera rehetra mandrafitra fehintsoratra iray dia hiseho hatraiza hatraiza mba hamorona ny fehezanteny misy fiatraikany lehibe amin'ny sary mihetsika. Tena malama noho ny iray amin'ireo vokatry ny lahatsoratra mahasarika maso sy avo lenta kokoa amin'ny lisitra iray manontolo. Tena ilaina mba hitazomana ao an-tsaina ireo karazana asa ho an'ny mpanjifa.

Sarimiaina an-tsoratra miloko

maro loko

Una sary mihetsika miadana sy mihetsika ny loko amin'ny lahatsoratra izay mahavita manao gradient. Na dia manana JavaScript kely aza izy io dia miorina amin'ny SCSS. Iray amin'ireo vokariny miafina io, saingy mampiseho ny hakanton'ny fahafantarana ny fomba fisafidianana azy amin'ny tranonkala. Tsy ho tsikaritra izany.

Vokatry ny lahatsoratra tsy azo atao

Lahatsoratra tsy azo atao

El boaty mena manodidina ny lahatsoratra mivadika ho azy amin'ny aloky ny aloka izay manarona ny teny na andian-teny. Tena manaitra ary mahaliana tokoa ny manarona ny vavahady fidirana na lohatenin'ny tranokala kanto.

Lahatsoratra feno loko misy fenony SVG

Lahatsoratra SVG

Multicolor fenoy ny sarimiaina izay natao ho iray amin'ireny vokatry ny soratra miakatra tenany. Tsy manam-paharoa izy ao anaty lisitra ary misy ireo fikitihana baomba ireo izay hiteraka fahatsapana ho an'ny mpitsidika ny tranonkala. Raha mahay mametraka ny toerany izy dia homeny ilay naoty.

Lahatsoratra mihetsika amin'ny SVG

Làlana SVG

Toy ny hoe namboarina ny lalana mankany aminy sary an-tsary SVG manaitra be. Iray amin'ireo liana be indrindra amin'ny lisitra ary apetraka amin'ny toerany manokana mba hahafantarana ny tenany tanteraka.

Lahatsoratra glitch

Glitch

Ity lahatsoratra amin'ny JavaScript, CSS ary HTML ity dia mety ho ilay fikitika manokana an'ny masoivohon'ny dokambarotra manome ny naoty amin'ny fehezanteny iray. Manentana ny fanahy ny vokany ary misarika ny sain'ny mpitsidika.

Lahatsoratra glitch

Lahatsoratra glitch

Toy ny hoe misy ny fanelingelenana ny famantarana izany manaova sary ny soratra na mamelona azy, io effa-tsoratra io dia famaranana lehibe. Singer tsy misy fisalasalana ary maneho ny tenany. Namboarina tamin'ny HTML (pug) sy CSS (SCSS).

Lahatsoratra glitch SCSS

Siansa glitch

Lahatsoratra glitch iray hafa misy fanelingelenana ho hitan'ny tranokalanao amin'ny tranonkala iray manokana noho ny lohahevitra, azo antoka mifandraika amin'ny tantara foronina.

Mametaka lahatsoratra 

Mametaka lahatsoratra

Ny fotoana apetrantsika eo ambonin'ilay lahatsoratra ilay mpanondro, ity dia ho lasa karazana crosshair hahafahantsika mamindra izany amin'ny litera tsirairay mba hampifantoka azy, satria ny ambiny dia tsy hifantoka. HTML, CSS ary JavaScript ho an'ny valiny lahatsoratra tsy manam-paharoa.

Ampidino amin'ny fomba fijery ny lahatsoratra

Mametaka lahatsoratra

Rehefa apetratsika ny mpanondro totozy amin'ity lahatsoratra ity, dia hifindra amin'ny fomba fijery mahaliana tokoa izay mamindra ny vokatry ny 3D.

Lahatsoratra manasongadina sary mihetsika

Lahatsoratra asongadin'i

Miaraka amin'ny mpanondro totozy dia hanasongadinana ny lahatsoratra ho raha tokony adika na hokapaina. Vokatry ny lahatsoratra latsaka avy any ambony handrakotra ny teny rehetra ao amin'ny fehintsoratra. Tsy misy JavaScript ary miaraka amin'ny CSS.

Lahatsoratra faly

sambatra

Vokatry ny lahatsoratra faly fa hikapoka mandra-panaontsika ny pointer totozy amin'ny sasany amin'ireo taratasiny. Ny vokany vokariny dia ny fitsangatsangan'ny sasany hatao hoe toy izany. Tsy misy JavaScript ary miaraka amin'ny CSS.

Lahatsoratra 3D amin'ny firafitra

Lahatsoratra 3D

Vokatra lahatsoratra 3D hafa ho an'ny mamolavola ireo teny samihafa amin'ny litera rehetra izay hiseho miaraka amina zoomed avy any ivelany ka hatrany anatiny. Vokatra lehibe ary tena hita maso sy sinema. Iray amin'ireo soso-kevitra ao amin'ilay lisitra.

Lahatsoratra CSS madio ao anaty alokaloka

Lahatsoratra aloka

Ity lahatsoratra ity dia vokany amin'ny CSS provoke aloky ny vokatra lehibe ary amin'ny fomba tsara. Tsy azo diso ary iray hafa amin'ireo fisongadinana ao anaty lisitra. Tsy misy sary mihetsika, fa mamirapiratra.

Alokaloka mahafinaritra

Alokaloka mahafinaritra

Vokatry ny aloka izay tena toa tsara. Tonga lafatra ho an'ny pejy fiantsenana na tranokala fikarakarana zaza. CSS madio hisongadina samirery.

Aloka faharoa

Aloka faharoa svg

Vokatry ny aloka lehibe hafa ao HTML sy CSS izay misongadina irery. Ny aloka amin'ny tsipika dia miteraka hatsarana lehibe ho an'ny tranonkala misy lohahevitra manokana.

Parallax Shadow

Parallax Shadow

Faranantsika amin'ny iray ny lisitra ny vokatry ny kanto indrindra amin'ny paralaks ho an'ny aloky ny alàlan'ny lahatsoratra. Nandalo ny pointer totozy isika ary ny lavitry ny ankavanana dia vao mainka hita taratra ny aloka. Mpanoratra Ract, ES6 ary Babel.

Manana lisitra hafa ianao vokany an-tsoratra eto.


Ny atin'ny lahatsoratra dia manaraka ny fitsipiky ny etika fanonta. Raha hitatitra tsindry diso eto.

Aoka ho voalohany ny fanehoan-kevitra

Avelao ny hevitrao

Ny adiresy email dia tsy ho namoaka. Mitaky saha dia marika amin'ny *

*

*

  1. Tompon'andraikitra amin'ny data: Miguel Ángel Gatón
  2. Tanjon'ny angona: Control SPAM, fitantanana hevitra.
  3. Legitimation: Ny fanekenao
  4. Fifandraisana momba ny angona: Tsy hampitaina amin'ny antoko fahatelo ny angona raha tsy amin'ny adidy ara-dalàna.
  5. Fitehirizana angona: Database nomen'ny Occentus Networks (EU)
  6. Zo: Amin'ny fotoana rehetra, azonao atao ny mametra, mamerina ary mamafa ny mombamomba anao.