23 miseve yehupenyu muCSS yewebhusaiti yako

Tinoenderera mberi neimwe denderedzwa yezvinyorwa zvatinoisa madudziro ezvinhu izvo zvatinogona kuwana mahara kubva kumawebhusaiti senge codepen.io. Nzvimbo dzakakosha kwazvo kutora kodhi muCSS, HTML kana JavaScript, uye zvichizoguma nemhedzisiro yakanaka mune inoonekwa yewebhusaiti; webhusaiti yatinozofambisa kune zvimwe zvinangwa nekumisikidzwa kwekodhi yakarongedzwa zvakanaka uye nemazano ekugadzira.

Izvi ndizvo 23 animated CSS miseve izvo zvakakwana kune izvo zvinhu zvinowanzo tarisa kutarisisa kwemushandisi uyo anotarisira kupfuura pamberi pechikwata cheiyi X chirongwa, kana kunzvimbo iyo kutenga kunogona kuitiswa muCommerce; miseve iyo yakakosha kuti tikwanise kugadzira mafirinesi uye nekudaro tiwane shanduko yakakura yechigadzirwa icho chatinotengesa muCommerce yedu.

Mifananidzo yeCSS yemhuka

Arrows Mhuka CSS ine kudivi kupuruzira inova yekutanga sampuli yemhuka dzeCSS dzakateedzana mune ino nhevedzano ye 23. Mhedzisiro yakapfava yemiseve ine mibairo mikuru yekuona uye isingapfuure zvakataurwa.

Museve wemhuka

Una museve mu svg izvo zvinowana yakakwana uye yehupenyu mifananidzo apo isu tine mbeva pointer pamusoro payo. Mukufamba kwedenderedzwa isu tinosimbisa ino yakakosha yewebhu element kune mazhinji mawebhusaiti.

Museve wemifananidzo

Mifananidzo muCSS neHTML ine shanduko yakapusa yemuseve zvimwe zvemazuva ano kune zvekare. Hapana chimwe chinopfuura ichi chemufananidzo wemuseve une kupera kwakanaka uye zvakapusa.

Miseve mifananidzo

Akateedzana miseve yehupenyu mu zvinzvimbo zvakasiyana uye kufamba. Iko kufamba kuri kwakabatana kwemiseve ine "hover" inosimbisa nzvimbo inotorwa nemuseve pawebhusaiti.

Museve chinongedzo

A kuyengerera denderedzwa patinosiya mbeva pointer pamusoro peiyi icon. A animation yakapusa yakaitwa zvakanaka, asi ine mhedzisiro yakanaka senge yasara yatiri kugovera kubva mukupinda uku. Creativos Online.

Katatu museve wemifananidzo

Kubva pamufananidzo weSVG, pano une akateedzana emawebhusaiti akatsaurirwa kune iyi mhando yemhando fomati, a katatu mifananidzo inoendesa kune vese vatatu vanogara miseve yekutanga mune imwe chete. Imwe mhedzisiro yakakura kune yako webhusaiti iyo inoipa iyo nyanzvi kubata.

Nyore CSS museve kudzokera kumusoro

Uyu museve wakapusa muCSS ine basa rekudzokera pakutanga kwewebhu. Iyo gimmicky twist ine kutanga uye kupera kumhanya iyo inogadzira yakashambidzika uye yakapusa maficha pakutanga kuona, kunyangwe ichi garo inopa hunyanzvi kubata senge yapfuura iyo.

Elastic museve

Uyu museve wakasununguka unozivikanwa nenyaya yekuti kana iwe ukabaya kana iwe ukadzvanya iyo, bounce mhedzisiro ichagadzirwa mune iyo nharaunda iko iko icon iko. Tinofanira kuziva kuti museve wakanangana zvakanyanya neJavaScript.

Arrow SVG neopopayi

Museve weSVG wakakumirira siya pointer pasi Kuti mamiriro ekushandurwa aoneke uye shanduko yemuvara ive tsvuku, zvirinani iyo yakapihwa mumuenzaniso, ipapo ichave iri nyaya yekuzvigadzirisa mukuda kwedu uye kufanofungidzira.

CSS DRM Miseve

Museve wakasarudzika weCSS kana uchikotama pachawo nekuchinja kweruvara. A yemiseve yakakosha, asi nekuti hapana kushomeka kwemhando yepamusoro uye izvo zvinotarisirwa kubata senge vamwe vazhinji.

Museve svg

Shanduko yekuchinja pakurema kana «kuyera» kweiyo icon, mune ino museve se protagonist yeiyi yekupinda. Iwe unongo wedzera huremu hwemuseve neyakavakirwa yakakosha CSS-based athari.

Museve

Un museve kuedza imomo matinowana akasiyana akasiyana avo aine hunyanzvi hwekugadzirwa ne div uye zvinhu zvekunyepedzera.

Yakachena CSS miseve

Zvimwe mhando yemiseve inowedzera iyo rondedzero, kunyangwe pano isu tinogona kumira kunze kwekugadzirwa muCSS uye HTML.

Yakakombama CSS museve

Kana iwe waida kupa chiitiko chakakombama kunge chinodhonzwa muruoko, uyu museve muCSS wakanakira icho chinangwa.

Museve

Museve une CSS shanduko inozadzisa iyo kuora museve mumifananidzo yakawanda inodhirowa mufananidzo uri kutaurwa.

Miseve mitatu mune imwechete

Rakajeka mifananidzo ku gadzirisa kushandura miseve mitatu kuita imwechete. Imwe yemamwe mhedzisiro yatinogona kutsvaga uye kuti tine kodhi yayo kuitira kuti tiishandise sezvatinoda pabasa redu kana webhusaiti.

Yakachena CSS scroll scroll

Mifananidzo mu isingagumi modhi yeakateedzana miseve inobvumidza imwe kuti ipfuure kutora nhanho yepakati ivo vari muhombe. Nekupedzisa kukuru, unozova museve wakanakira kukurudzira iwe kuti utevere mafambiro pawebhu

SCSS museve wemifananidzo

Zvimwe yakanaka yakapusa isingagumi mifananidzo uye inozivikanwa nekutsvaira kugadzira imwe nzira museve uye nekudaro kuwana yakasarudzika "chiuno".

Gooey museve wemifananidzo

Pamifananidzo yese inoonekwa mune ino museve runyorwa, zviri pasina mubvunzo anonyanya kufarira uye ane hunyanzvi hwekugadzira. Mifananidzo inopotsa ichipfuura nepakati payo painopururudzira yakatwasuka. Yakakurudzirwa kusiya mushandisi akashamisika anouya kuwebsite yako.

Mifananidzo kune kumagumo

Iyi yehupenyu, senge yapfuura iyo, ine kumushandisi pakupera kwewebhu zvekuti inopfuura kune tsoka. Iyo inoratidzirwa neyekugadzira mifananidzo iyo inoita kuti ive yakatanhamara kubva kune vamwe vese. Zvirinani kuti iwe uzvione zvichiita kubva kune iyi link kuenda ku codepen.io.

Arrow yakapusa icon

Chiratidzo icho sezvakaratidzwa chiri nyore kwazvo uye icho Inosanganisira yakapusa mifananidzo. Izvi hazvireve kuti isu tiri kutarisana nemhando yekodhi seiya yakagovaniswa naJoshua MacDonald.

Kuridza Museve Wemifananidzo

Mumwe museve une bounce animation muHTML neCSS izvo zvinoedza kusiyana nevamwe. Zvirokwazvo unoiwana kubva pane iyo demo uye kurodha pasi iyi link.

Museve wemifananidzo

Imwe mifananidzo ye museve muCSS neHTML iyo zvakanaka «kutama». Ndiyo chinhu chayo chikuru mukuchisiyanisa kubva kune yakasara yeiyi 23 CSS miseve yewebhusaiti yako.