Zana-tsipika mihetsika 23 ao amin'ny CSS ho an'ny tranonkalanao

Zana-tsipìka CSS

Manohy amin'ny lahatsoratra iray hafa izay napetrakay izahay ny lantom-peo amin'ireo singa izay azontsika atao maimaim-poana avy amin'ny tranonkala toy ny codepen.io. Ireo tranonkala manana sanda lehibe handray ny kaody amin'ny CSS, HTML na JavaScript, ary vokatr'izany dia miteraka valiny tena tsara eo amin'ny lafiny fahitana amin'ny tranokala; tranokala izay hizorantsika tanjona hafa miaraka amin'ny fampiharana kaody efa voalamina tsara sy miaraka amin'ny hevitra mamorona.

Ireo dia Zana-tsipìka CSS mihetsika 23 izay mety indrindra amin'ireo singa izay mitarika ny mason'ny mpampiasa izay mikasa ny handalo alohan'ny ekipa tetikasa X misy lohahevitra, na amin'ny toerana ahafahana mividy amin'ny eCommerce; zana-tsipìka izay tena ilaina mba hahafahana mamorona funnels ary hahatratra ny fiovam-po bebe kokoa an'io vokatra amidinay ao amin'ny eCommerce anay io.

Zana-tsipìka CSS sarimiaina

Zana-tsipìka mihetsika Css

zana-tsipìka CSS Animated miaraka amina horonana izay santionany voalohany amin'ny zana-tsipìka CSS mihetsika amin'ity andiany 23 ity. Vokany tsotra ho an'ny zana-tsipika misy valiny hita maso ary tsy mihoatra ny voalaza.

Zana-tsipika mihetsika

Zana-tsipika mihetsika

Una arrow in svg izay hahatratra sary mihetsika sahaza sy tsara rehefa manana ny pointer totozy momba azy io. Amin'ny hetsika boribory dia hasongadinay ity singa tranonkala manan-danja ity amin'ny tranokala maro.

Sarimiaina zana-tsipìka

Sarimiaina zana-tsipìka

Sarimiaina amin'ny CSS sy HTML izay misy a fanovana tsipika tsotra maoderina kokoa mankany amin'ny kilasika kokoa. Tsy misy afa-tsy ity sarimiaina ity ho an'ny zana-tsipìka miaraka amana famaranana tsara sy tsotra.

Sarimiaina zana-tsipìka

Sarimiaina arrow arrow

Andiana zana-tsipìka mihetsika ao anaty toerana sy fihetsehana samihafa. Ny hetsika dia aorinan'ny zana-tsipìka izay misy "hover" izay manasongadina ny toerana alain'ny zana-tsipìka eo amin'ny tranonkala.

Rohy zana-tsipika

Manodidina ny faribolana

ny mamily faribolana rehefa avelantsika eo ambonin'ity kisary ity ny mpanondro totozy. Fampisehoana an-tsehatra voafehy tsara tantana, saingy misy fiatraikany lehibe toy ny ambiny izay zarainay amin'ity lahatsoratra ity ao amin'ny Creativos Online.

Sarimiaina zana-tsipìka telo

Triple svg

Miorina amin'ny sary SVG, Eto ianao dia manana andian-tranonkala natokana ho an'ity karazana endrika sary ity, a sary mihetsika telo izay mitarika amin'ny telo zana-tsipìka voalohany tao anaty iray monja. Fiovana lehibe iray hafa ho an'ny tranonkalanao izay manome azy fifandraisana matihanina.

Zana-tsipìka CSS tsotra niverina teo an-tampony

CSS madio tsotra

Ity iray ity zana-tsipika tsotra amin'ny CSS manana ny andraikitra hiverina amin'ny fiandohan'ny tranonkala. Fiovana mihomehy miaraka amin'ny hafainganam-pandeha sy ny hafainganam-pandeha izay mamorona sary mihetsika tsotra sy tsotra raha vao jerena, na dia manome fikitihana matihanina toa ilay teo aloha aza izy io.

Zana-tsipika elastika

lasitike

Ity iray ity Ny zana-tsipika elastika dia miavaka amin'ny hoe rehefa manindry ianao na tsindrioo izy io, dia hiteraka vokarin'ny fikorontanana eo amin'ny sehatry ny toerana misy ilay sary masina. Tokony hekentsika fa zana-tsipika mifototra amin'ny JavaScript izany.

Arrow SVG miaraka amina sary mihetsika

Sarimiaina zana-tsipìka

Zana-tsipika SVG izay miandry anao avelao hidina ny tondro Ho fisehoan'ny famindrana toerana ary hiova ho mena ny lokony, farafaharatsiny izay voalaza ao amin'ny ohatra, dia ho lasa fomba ampanjifaina azy io araka ny itiavantsika azy sy ny toetrantsika taloha.

Tifitra CSS Chevron

CSS Chevron

Zana-tsipìka CSS somary tsotra amin'ny miondrika ny tenany miaraka amin'ny fiovan'ny loko. ny amin'ireo zana-tsipìka tena fototra, fa satria tsy misy ny tsy fahampian'ny kalitao ary izany no antenaina hikasika ny maro hafa.

Arrow svg

Arrow svg

Vokatry ny tetezamita amin'ny lanja na «lanja» an'ny sary masina, amin'ity tranga ity dia zana-tsipìka ho mpiorina an'ity fidirana ity. Mampitombo ny lanjan'ireo zana-tsipìka fotsiny ianao miaraka amin'ny vokatra miorina amin'ny CSS.

Voasambotra

Voasambotra

Un fanandramana zana-tsipika ahitantsika karazana isan-karazany tsara amin'izy ireo miaraka amin'ny mampiavaka azy ireo nohariana tamin'ny singa div sy pseudo.

Zana-tsipìka CSS madio

Zana-tsipìka CSS madio

iray hafa karazana zana-tsipìka manankarena ny lisitra, na dia eto aza isika dia afaka miavaka ankoatry ny famoronana amin'ny CSS sy HTML.

Zana-tsipika CSS miolaka

Zana-tsipika miolaka

Raha te hanome ianao vokany miolakolaka toa voasintona eny an-tanana, ity zana-tsipìka amin'ny CSS ity dia mety indrindra amin'izany.

Zana-tsipìka

Zana-tsipika tetezamita

Zana-tsipìka miaraka amin'ny tetezamita CSS hahatratra ny vokatry ny zana-tsipìka amin'ny sary maromaro izay manintona ilay tarehimarika resahina.

Zana-tsipìka telo amin'ny iray

Telo amin'ny iray

Sarimiaina marefo amin'ny mitantana manova zana-tsipìka telo ho iray. Ny iray amin'ireo vokany izay azontsika tadiavina ary ananantsika ny kaody ka ampiasaintsika araka izay itiavantsika azy amin'ny asantsika na tranokalanay.

Sarimiaina horonan-taratasy CSS madio

CSS madio

Sarimiaina ao maody tsy manam-petra an'ny andiana zana-tsipìka mamela ny iray hafa handroso hiakatra afovoany rehefa izy ireo no lehibe indrindra. Miaraka amin'ny famaranana tsara dia lasa zana-tsipìka mety izy hampirisihana hanaraka ny lalana amin'ny tranonkala.

Sarimiaina zana-tsipìka SCSS

SCSS

iray hafa sary mihetsika tsotra tsy manam-petra ary izay miavaka amin'ny fanjavona mba hanome lalana ny zana-tsipìka hafa ary amin'izany dia hahatratra "loop" manokana.

Sarimiaina zana-tsipika gooey

Gooey

Amin'ireo sary mihetsika hita ato amin'ity lisitra zana-tsipika ity dia tsy isalasalana fa ny liana sy mamorona indrindra. Sarimiaina izay saika mandalo ny sehatry ny fihodinany. Nanoro hevitra anao tokoa ny hamela ny mpampiasa ho gaga izay tonga ao amin'ny tranonkalanao.

Sarimiaina hatramin'ny farany

Zana-tsipìka eo ambany

Ity sarimiaina ity, toy ireo taloha, dia manana ho an'ny mpampiasa any amin'ny faran'ny tranokala ka lasa amin'ny footer. Mampiavaka azy ny sary mihetsika mamorona izay mampiavaka azy amin'ny ambiny. Aleo ianao mahita azy amin'ny hetsika manomboka amin'ny rohy mankany amin'ny codepen.io.

Zoro tsipika tsotra

Kisary tsotra

Sary famantarana izay araka ny voalaza dia tena tsotra ary izay Izy io dia misy sary mihetsika tsotra. Tsy midika izany fa miatrika kaody tsara kalitao toa ilay nozarain'i Joshua MacDonald izahay.

Fihetsiketsehana amin'ny zana-tsipìka

Zana-tsipika mihetsika

Zana-tsipìka hafa miaraka a fampivoarana sary mihetsika amin'ny HTML sy CSS izay manandrana tsy hitovy amin'ny hafa. Azo antoka fa azonao avy amin'ny demo izany ary alainao ilay rohy.

Sarimiaina zana-tsipìka

Sarimiaina zana-tsipìka

Sarimiaina iray hafa ho an'ny zana-tsipìka amin'ny CSS sy HTML izay tsara «nihetsika». Io no fananany lehibe indrindra amin'ny fanavahana azy amin'ny sisa amin'ity andiana zana-tsipika CSS 23 ity ho an'ny tranonkalanao.


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

Fanehoan-kevitra iray, avelao ny anao

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.

  1.   Carolina dia hoy izy:

    Salama! Misaotra betsaka amin'ny vaovao. Manana fanontaniana momba ny zana-tsipìka miolaka aho… misy fomba hanovana ny fihodinan'ny fiolahana ve? afaka asehonao kaody ve aho? Tiako izany!