Uma sisebenzisa i-JS ne-jQuery sinokulawula okugcwele phezu kwemifanekiso futhi singadala imiphumela emangalisayo, kodwa intengo iphezulu kakhulu. Isikhathi sokucubungula, ukuhambisana kwesiphequluli (amadivaysi eselula, isibonelo, ahluke kakhulu uma kuziwa ku-JS) futhi ukukhwabanisa kwekhodi ngokwayo kungamaphuzu okufanele siwakhumbulehaakiaki.


Ngakho, namhlanje sizobona ukuthi singakugwema kanjani i-JS ngokusebenzisa i-CSS Izithombe ne-Transitions. Sizoxoxa ngezinyathelo eziyisisekelo kakhulu eminye imiphumela emangalisayo, njengamaphaneli við-harmonikku nama-sub-amamenyu amancane.

Thatha isihlalo, wena uthayipha futhi isiphequluli sangempela (noma yini ngaphandle kwe-IE) futhi ake siqalise.

Kufutfumeta

Sinezinzuzo ezimbalwa (nezinkinga njengento yonke ekuphileni kwethu) ekusebenziseni izithombe ze-CSS. Uma udinga ukuthengisa lezo kumphathi wakho noma iklayenti, yilokhu okufanele ugcine engqondweni:

  • Kungenzeka ukuthi basheshe, ngoba bangasebenzisa ukusheshisa kwehadiwe (njengokusebenza kwe-HTML5)
  • Bazokwenza ngcono kumadivayisi weselula futhi ngeke badinga ikhodi ethize ukulandelela imicimbi yokuthinta
  • I-JS idinga ukuhunyushwa yisiphequluli futhi amathuba okuphula isiphequluli zinkulu kakhulu. Ngakho uma i-CSS ihluleka, ihluleka ngokuthula ngenkathi i-JS ingaqeda lonke ikhasi
  • Unesibambiso esihle sesiphequluli (le sayithi izokusiza ukuthi uhlole izibalo ezithile kulokho: http://caniuse.com/#search)

Izibonelo ze-CSS3 Izithombe

Ngaphambi kokuthi siqale enyameni yalokhu okuthunyelwe, ake sibheke ezinye izithombe ezinhle ezenziwe nge-CSS emsulwa.

I-CSS ehlanzekile ye-Twitter ayikhohlisi i-Whale

I-Whale Ehlulekile Yomdwebo

Yenziwe nguSteven Dennis, bheka lokhu ngesenzo.

I-CSS ehlanzekile ye-Scrolling Coke
Izibonelo ze-Animation ze-CSS 3: Ukuphenya i-Coke Can

Yenziwe yiCorse yamaRoma, bheka lokhu ngesenzo.

Umuntu ohamba nge-CSS ohlanzekile

Izibonelo zezingqikithi ze-CSS 3: Umuntu Ohambayo

Yenziwe ngu-Andrew Hoyer, bheka lokhu ngesenzo.

Ukuthola izandla zakho zingcolile

Ake siqale ikhodi. Sizosebenzisa okuningi amakilasi we-CSS angamanga ukuqala izithombe. Ukuze uthembeke, abathuthukisi abaningi batusa ukuthi usebenzise i-JS ukuze usebenze futhi ungavuseleli izithombe, kodwa lapha sizobona indlela elula:

#test {bakgrunnur: ebomvu; } #Isiqalo: i-hover {ingemuva: eluhlaza; } #Isiqalo: isisemuva {esasemuva: esiluhlaza; } #sest: miða á {bakgrunn: emnyama; }}

Sinamanye amakilasi ambalwa okungaqondakali, kodwa uthola lo mbono! Ngakho-ke yilokho okwenzekayo uma uchofoza isici se- #test (ucabanga ukuthi yisixhumanisi):

  • Isimo esivamile: Ingemuva izobe ibomvu
  • I-Hover: Uma igundane lingena endaweni yendawo kuzoba nomlando ohlaza
  • Isebenza: Uma uchofoza isikhombisi kuso futhi ngenkathi inkinobho yegundane isacindezelwe umbala wangemuva kuzoba luhlaza okwesibhakabhaka
  • Okubhekiselweyo: Uma ikhasi lamanje line- # okuyi-URL lesi sici sizoba mnyama

Ngamunye walawa angasetshenziselwa izithombe ze-CSS, isibonelo ungakha izixhumanisi ze-2 ukuze wenze kusebenze futhi usebenze izithombe ze-CSS ezisebenzise isici sokubamba iqhaza ngekhodi:

kusebenze vala

Izinguquko ze-CSS

Ushintsho lwe-CSS luzoshintsha kusukela ekuqaleni kuze kube sekupheleni isimo ngokushelela. Ngakho uzochaza kusikhethi esikhulu usebenzisa "ukuguqulwa" impahla ngesikhathi kanye nendawo ngayinye ezosithinteka nokuthi indlela okumele ibe ngayo kufanele ibe ngayo. Ake sibone isibonelo:

.prófa {/ * ishintsho-impahla isikhathi sokusebenza kwesikhathi, * / umbala: okwesibhakabhaka; ukuguquka: umbala we-2, usayizi wefonti 2s ukukhishwa; } .test: sveima {umbala: obomvu; } .test: esebenzayo {usayizi wefonti: 200%; }}

Uma ufaka isici se-.test sizoguqula kancane kancane umbala obala okwesibhakabhaka ube obomvu (yiyiphi i-palette enhle, h?). Þú þarft að nota, nota okkur og nota kancane kancane, 200%, meira en elizenzakalelayo.

Siphinde sibe nempahla "yokuguqulwa kwesikhathi", isethwe njengokukhululeka, ukuthi "isikhathi" sitholakalayo kanjani se-fjör sizosetshenziswa. Nansi amanani angenzeka:

  • Línuleg: Isivinini esifanayo kusukela ekuqaleni kuze kube sekupheleni
  • I-Ease-in: Ukuqala okuphansi
  • Ukuphumula: Ukuphela kancane
  • Kulula: Ukuqala okuphansi, okusheshayo phakathi, bese sekuphela kancane
  • Kulula ukuphuma: Ukuqala okuphansi, ukuphela kancane
  • I-Cubic-bezier (a, b, c, d): Isivinini somuntu siqu

Umsebenzi we-cubic Bezier uzodala izithombe eziphathekayo nezinombolo ze-4 ezihluka kusuka ku-0 kuya 1, emele ijika lesibalo se-animation speed X isikhathi eside.

Úkuze uthole ukuhambisana kwesiphequluli okungcono kufanele ucabange ukusebenzisa ama-forskeyti e-ópera, i-Firefox, ný vefsíða:

div {ububanzi: 400px; -o-ushintsho: ububanzi 2; -kuguquguquka kwesimo: ububanzi be-2; -webkit-ushintsho: ububanzi be-2; ukuguquka: ububanzi 2; }}

Futhi, ungasebenzisa imibuzo yemidiya ukuchaza ukushintsha okuhlukile kuye ngokuthi ububanzi besiphequluli (amadivaysi eselula, amaphilisi). Lesi yisibonelo esilula:

umzimba {usayizi wefonti: 1em; } @media skjár kanye (hámarksbreidd: 800px) {umzimba {usayizi wefonti: 0.8em; }} @media skrini futhi (hámarksbreidd: 400px) {umzimba {usayizi wefonti: 0,7em; }}

Lapha usayizi wefonti uzoguqulwa ngokuzumayo uma ukwandisa ububanzi besiphequluli. Le khodi izovimbela lokho ukuthi kungenzeki, kuhlinzeka ngokuguquguquka okukhulu kakhulu:

umzimba {-o-ushintsho: usayizi wefonti .5s línuleg; Ukushintsha -moz: ubukhulu befonti .5s línulegt; -webkit-ushintsho: usayizi wefonti .5s línuleg; ushintsho: usayizi wefonti .5s línuleg; }}

Ungasebenzisa nalokhu uma unemibukiso ehlukene noma ubukhulu vera andlitsmynd / landslag, uma ufuna ukushintsha ububanzi, imibala, ama-paddings, ukubonisa imenyu.

I-CSS Teiknimynd – I-Fun Yangempela Iyaqala

Ég-fjör ukulandelana kokuguqulwa kuchazwe kusikhethi esisodwa. Notaðu þig til að nota CS-uzodinga ukulandela izinyathelo ze-2.

Umthetho usetshenziselwa ukuchaza ukulandelana kwezinyathelo ze-animation, futhi kuchazwa igama eliyingqayizivele nezitayela ezichaza ukuthi lezi zithombe zisebenza kanjani. Njengesijwayelekile sizodinga izibikezelo ezithile zabathengisi, njengalesi sibonelo:

/ * ikhodi efanayo yomthengisi ngamunye * / @ -o-keyframe yami-animation {… @ -mofr-keyframe yami-animation {… @ -webkit-keyframe yami-animation {… / * igama le-animation * / @keyframe yami-animation {/ * uhlaka lohlaka * / 0% {/ * isitayela sesitayela * / kwesobunxele: 0px; Okuphezulu: 0px; } 25% {Kwesobunxele: 200px; Okuphezulu: 0px; } 50% {Kwesobunxele: 200px; Okuphezulu: 200px; } 75% {Kwesobunxele: 0px; Okuphezulu: 200px; } 100% {Kwesobunxele: 0px; Okuphezulu: 0px; }}

Ngakho, isitayela ngasinye ichazwa ngesakhiwo / isikhathi sesikhathi (njengalezo ozimele ezivela ku-flash hreyfimyndir) njengephesenti nezitayela okufanele zisetshenziswe lapho. Lesi sithombe esiyisihluthulelo, isibonelo sithi isici sizohamba ngakwesobunxele, bese phezulu, ngakwesokudla, bese phansi.

Ngemuva kokuthi ulandele isinyathelo i-1 futhi wadala ukhiye wakho wokhiye ongayisebenzisa empeleni. Khona-ke sizosebenzisa i-logic efanayo kakhulu njengoba senze ngokuguquguquka kwe-CSS, umehluko wukuthi manje "ukuguquka" kwethu kuyimifanekiso enzima kakhulu.

Ukuyisebenzisa sizosebenzisa indawo ye-animation futhi inezakhiwo ezincane ze-7:

  • Igama: leso sikhombisi esiyingqayizivele
  • Isikhathi: Kuzothatha isikhathi esingakanani kusuka ku-0% kuya 100%
  • Isikhathi sokusebenza: kuhle kakhulu okufana nokusebenza kwesikhathi sokushintsha isikhathi
  • Ukulibala: Kuzothatha isikhathi esingakanani ukuqala i-0%
  • Ukuguqulwa-kubalwa: Mangaki okuphindaphindiwe esiyoba nawo ("okungenamkhawulo" við-lykkja engapheli)
  • Ukuqondisa: okujwayelekile noma okunye (ukubuyela emuva)
  • Dlala-isimo: uma izithombe zihamba noma zimiswa okwesikhashana

Lokhu kuzosebenza izithombe zethu ku- # element esiphezulu uma kuhloswe kwekhasi:

#test: inhloso {/ * izithombe-izithombe | ubude besikhathi | isikhathi-umsebenzi | ukubambezeleka | ukubhaliswa-count | isiqondiso | ukudlala-isimo * / izithombe: yami-animation 10s line 0s ejwayelekile ukusebenza okujwayelekile; }}

Ngalokhu engqondweni singakha izibonelo ezimbalwa ezesabekayo.

I-CSS kuphela i-Accordion

Sizodala ama-spjöldum ahlulekayo asebenzisa izithombe ze-CSS. Nasi er HTML-skjal sent:

ithebhu ye-1

TEXT 1 ithebhu 2

TEXT 2 ithebhu 3

TEXT 3

Lokhu kuzokwenza nje ukudala amaphaneli kanye nesixhumanisi esizobangela ngamunye wabo. Futhi yilapho imilingo yenzeka khona:

/ noma yikuphi div ephakathi kwe-harmonion * /. akkordion div {/ * ifihliwe ngokuzenzakalelayo * / ukuphakama: 0; ukuchichima: kufihliwe; / * umlingo omnyama * / ushintsho: ubude be-1; } / * uma i-div ekhonjiwe i-target * / .accordion div: inhloso {/ * ukuphakama: i-auto ngeke isebenze, kodwa lokhu kuzosebenza kahle * / ukuphakama: 80px; }}

Okuhle okulula, ha? Futhi ususebenzise impilo yakho yonke usebenzisa i-JS yalokhu? 🙂

I-CSS Imenyu kuphela ne-Submenus

Futhi lena isicelo esilula kunalokho. Ngokuqinisekile unayo imenyu yokuhamba kusayithi lakho, futhi ngokuvamile sidinga ukusebenzisa amanye ama-submenus lapho. Indlela engcono kakhulu yokubonisa nokufihla izinto isebenzisa i-jQuery, kwesokudla? Cabanga og framúrskarandi kókóhlóla le khodi:

  • 1. liður
    • Liður 1.1
    • Í 1.2
    • 2. liður
      • Liður 2.1
      • Liður 2.2

        Futhi idijithali iqala lapha:

        {/ * ukwenza nje izixhumanisi kangcono * / ukubonisa: ukuvimba; i-padding: 4px; } indlela yokubhala umbhalo: isikhungo; } / * noma yimiphi imenyu (kufaka phakathi oyinhloko) * / nav ul {ukubonisa: inline-block; isitayela-uhlu: akekho; }> ul> ul> li {/ * izinto ezingezansi (okuzosebenza kahle kuzo) * / fljóta: kwesokunxele; } i-div div {/ * yehla yonke imenyu * / ukuphakama: 0; ukuchichima: kufihliwe; / * Houdini imizwa * / ushintsho: ubude be-1s; } i-li li: sveima> div {ukuphakama: 56px; }}

        Efingqa

        Ngempela lokhu kungumhlahlandlela wokuqalisa. Kuneminye imiphumela eminingi epholile engenziwa ngokusebenzisa izithombe ze-CSS kuphela kanye nezinto eziningi ngokuqinisekile ezizayo.

        Ngakho, usetshenzisile lokhu ngaphambili? Ungacabanga ngomunye uhlelo lokusebenza oluhle lwezithombe ze-CSS? Yabelana ngemicabango yakho usebenzisa imibono!

        Jeffrey Wilson Administrator
        Sorry! The Author has not filled his profile.
        follow me