Iinguqu ze-CSS3 zenza i-Nice Fade Effects
Abaqulunqi bewebhu bekade befuna ukulawula ngaphezulu kwamaphepha abenzileyo xa iCSS3 ibetha kwindawo. Izitayela ezintsha ezisekwa kwi-CSS3 zanikezela abaqeqeshi bewebhu amandla okongeza imiphumo ye-Photoshop kumaphepha abo. Oku kwakuquka iipropati ezinjengezithunzi zokulahla kunye neengqungquthela, iingqungquthela ezijikeleziweyo kunye nokunye. I-CSS3 iphinde ifake imifanekiso-enjengeempawu ezingasetyenziselwa ukudala ukusebenzisana okuhle kumaziko.
Enye imbonakalo enhle kakhulu yokubonayo ongayongeza kwizinto kwiwebhusayithi yakho usebenzisa i- CSS3 kukubenza baphele kwaye baphume ngokusebenzisa ukuhlanganiswa kweepropati ze- opacity kunye noshintsho. Le ndlela yindlela elula kwaye exhaswa kakuhle ukuze wenze amaphepha akho asebenzisane ngokudala iindawo eziqingqiweyo ezijoliswe xa isivakashi sesayithi senza into ethile, njengokungena kwi-element.
Makhe sijonge ukuba kulula kangakanani ukongeza le mpawu ebonakalayo ebonakalayo kwizinto ezahlukeneyo kumaphepha akho ewebhu.
Vumela & # 39; s utshintsho lwe-Opacity kwi-Hover
Siza kuqala ngokujonga indlela yokutshintsha i-opacity yomfanekiso xa umthengi ehamba phezu kwaloo nto. Kulo mzekelo (i-HTML iboniswe ngezantsi) Ndisebenzisa umfanekiso kunye nenqaku leklasi ye-gray.
Ukuze sikhiphe, songeza imigaqo yesitayela elandelayo kwi-style ye-CSS yefayile:
.greydout {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Ezi zicwangciso ze-opacity ziguqulela kuma-25%. Oku kuthetha ukuba umfanekiso uza kuboniswa njenge-1/4 yobume bawo obuqhelekileyo. I-opaque ngokupheleleyo engabonakaliyo iya kuba yi-100% ngelixa i-0% yayiza kubonakala ngokucacileyo.
Okulandelayo, ukwenza umfanekiso ufike kucace (okanye ngokuchanekileyo, ukuba ube yi-opaque ngokupheleleyo) xa imouse igxininiswa ngaphezu kwayo, uya kudibanisa i-hover pseudo-class:
.greydout: hover {
-blog-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Uya kuphawula ukuba, kule mizekelo, ndisebenzisa umthengisi utshintsho oluqingqiweyo lolawulo ukuqinisekisa ukuhambelana ngokulandelelana kweenguqu ezidala zalezo zikhupheli. Nangona oku kuyindlela elungileyo, ukunyaniseka kukuba ukulawulwa kwe-opacity ngoku kuxhaswa ngokufanelekileyo ngabaphequlula kwaye kukukhuseleke kakhulu ukulahla abo bathengisi. Sekunjalo, akukho sizathu sokuba ungabandakanyi ezi ziqendu xa ufuna ukuqinisekiswa ngenkxaso yeenguqulelo zesiqulatho. Qiniseka ukuba ulandele umgangatho ophezulu owamkelekileyo wokuphelisa isimemezelo ngokuqhelekileyo, ingu-prefixed version yesitayela.
Ukuba usebenzise le ndawo kwi-site, uza kubona ukuba utshintsho olwenziwe ngolu hlobo luguqulwa ngokukhawuleza. Okokuqala imhlophe kwaye ke ayikho, kungekho mazwe athile phakathi kwabo babini. Kufana nomtshini wokukhanya-okanye ucima. Oku kungaba yiloo nto oyifunayo, kodwa unokuba ufuna ukuzama ukutshintsha utshintsho oluthe gqolo.
Ukongeza impembelelo enhle kwaye wenze le nto iphosakele, ufuna ukufaka isakhiwo sokuguqulela kwiklasi yeGreydout:
.greydout {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-utshintsho: zonke i-3 ziyanceda;
-kuguqulela -moz: zonke ii-3 ziyanceda;
-ms-shintsho: zonke i-3 ziyanceda;
-o-utshintsho: zonke i-3 ziyanceda;
Utshintsho: zonke ii-3 ziyanceda;
}
Ngale khowudi, utshintsho lwaluya kutshintshwa ngokuthe ngcembe kunokuba luguqule ngokukhawuleza.
Kwakhona, sisebenzisa inani labathengisi imithetho eqhotyoshelweyo apha. Utshintsho aluxhaswanga njengophawu, ngoko ke ezi ziqendu zenza ingqiqo.
Into enye ukukhunjulwa njengoko uceba le mibalelwano kukuba iifowuni zecandelo lokuthintela ayinalo "isimo sokumisa", ngoko ke le miphumo ilahlekelwa yindoda esebenzisa ifowuni yokuthinta ifowuni. Utshintsho luya kwenzeka, kodwa lwenzeka ngokukhawuleza kangangokuthi abanako ukubonakala. Oku kuhle ukuba ukongeza oku njengento ebalulekileyo yebhonasi, kodwa ugweme nayiphi na utshintsho olufunekayo ukuba lubonwe kumxholo oza kuqondwa.
Ukugqitywa kweSithuba kuNokwenzeka
Akudingeki uqale ngomfanekiso oqingqiweyo, ungasebenzisa ukutshintshwa kunye ne-opacity ukuze uphelelwe emfanekisweni opaque ngokupheleleyo. Ukusebenzisa umfanekiso ofanayo, kuphela ngeklasi yokuphelisa:
eklasini = "ngokushiya">
Njengoko ngaphambili, utshintsha i-opacity usebenzisa: i-hover selector:
.Ukuphuma
-webkit-utshintsho: zonke ii-2 ezi-out-out-out;
-uguqulelo -moz: zonke ii-2 ezi-out-out-out;
-miguqulelo: zonke ii-2 eziphumayo;
-o-utshintsho: zonke ii-2 eziphumayo;
Utshintsho: zonke ii-2 eziphumayo;
}
.Ngokushicilela: hover {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Kulo mzekelo, umfanekiso wawuza kuguqulwa ukusuka kwi-opaque ngokupheleleyo ukubonakala ngokucacileyo-ukutshintsha komzekelo wethu wokuqala.
Ukuya Ngaphandle Kwezithombe
Kulungile ukuba ungasebenzisa le miboniso ebonakalayo kwaye uguqulele imifanekiso, kodwa awugcini nje ukusebenzisa imifanekiso kunye neziphumo zeCSS. Unokwenza i-CSS-styled inkinobho ezilula xa zicofa kwaye zigcinwe. Uza kufaka i-opacity usebenzisa: i-pseudo-class class esebenzayo kwaye ubeke utshintsho kwiklasi elichaza iqhosha. Cofa uze ubambe eli qhosha ukuba ubone oko kwenzeka.
Kunokwenzeka ukuba wenze nantoni nayiphi na into ebonakalayo ibonakale xa ikhupha phezulu okanye iqhosha. Kulo mzekelo nditshintsha i-opacity ye-div kunye nombala wombhalo xa imouse iphezu kwayo. Nantsi iCSS:
#myDiv {
ububanzi: 280px;
Umbala wemibala: # 557A47;
umbala: #dfdfdf;
ukupakisha: 10px;
-webkit-utshintsho: zonke i-4s-outs -s 0s;
-uguquko -moz: zonke i-4s-outs -s 0s;
-mitshintshi: zonke ii-4 ziyakhupha ii-0s;
-o-utshintsho: zonke ii-4s-outs 0s;
Utshintsho: zonke ii-4 ziyakhupha ii-0s;
}
#myDiv: hover {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
umbala: # 000;
}
ImiSebenzi yokuHlola ingazuza kwiMvelaphi yeMvelaphi yokuGcina
Kule menu elula yokurhweba umbala wesiqalo uhamba ngokukhawuleza ngaphakathi nangaphandle njengam mouse phezu kwempahla yemenyu. Nantsi i-HTML:
- Ikhaya
- CSS3 Tutorials
- Iimpahla zeCSS3
Kwaye nantsi iCSS:
# isampulaNav {isalathisi-style: akukho; }
# isampulaNav li {
ukubonisa: umgca;
float: ekhohlo;
ukupakisha: 5px 15px;
umgama: 0 5px;
-webkit-utshintsho: zonke ii-2 zomgca;
-kuguqulela -moz: zonke ii-2 zomgca;
-ms-ishintsho: zonke ii-2 zomgca;
-o-utshintsho: zonke ii-2 zomgca;
Utshintsho: zonke ii-2 zomgca;
}
isampuli #Nav li {isetekisi-mbhalo: akukho; }
isampuli #Nav li: hover {
Umbala wembali: # DAF197;
}
Inkxaso yeSiphequluli
Njengoko ndithintele kwiihlandlo ezimbalwa sele sele, ezi zintlobo zineenkxaso zengqapheli ezintle, ngoko ke kufuneka uzive ukhululekile ukuzisebenzisa ngaphandle kobugwenxa. Okukuphela kweenguqu ezikudala ze-Internet Explorer, kodwa ngesigqibo sikaMicrosoft esandula ukuphelisa inkxaso kuzo zonke iinguqu ze-IE ngaphantsi kwe-11, ezi ziphequluli ezindala ziba ngaphantsi kombandela-kwaye ngokuqinisekileyo, ukuba isiphequluli esingasemva ubona ukuguqulwa kwezinto, okungafanelekanga ukuba yingxaki enkulu. Ngethuba nje uvalela ezi ntlobo zeempembelelo ekusebenzisaneni okunandiphayo kwaye ungazithembi ukuba uqhube ukusebenza okanye ubonise umxholo obalulekileyo, emva koko iziphequluli ezidlulileyo ezingayixhasi imiphumo ziya kufumana amava amnandi, kodwa abasebenzisi kwezo zikhupheli abayi uyayazi umahluko, ngakumbi ukuba unokusebenzisa isayithi njengesiqhelo kwaye fumana ulwazi abayidingayo.
Ulonwabo olongezelelweyo; Shintsha iifoto ezimbini
Nasi umzekelo wendlela yokutshaya umfanekiso omnye kwenye. Sebenzisa i-HTML:
Kwaye i-CSS eyenza ibe yinto ecacileyo ngokucacileyo ngelixa elinye lisebenza ngokugqithiseleyo kwaye emva koko utshintsho luyatshintshela ezimbini:
.swapMe img {-webkit-ishintsho: zonke i-1 zi-out-out; -uguquko -moz: zonke i-1 zi-out-out; -ms-shintsho: zonke i-1 zi-out-out; -o-utshintsho: zonke i-1 zi-out-out-out; Utshintsho: zonke i-1 zi-out-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }