CSS3 Transitions Mepụta Nice Fade Effects
Ndị na-eme weebụ na-achọsi ike ka ha nwekwuo ike ịchịkwa ibe ha ka ha na-eke mgbe CSS3 kụrụ ebe ahụ. Ụdị ọhụrụ ndị e gosipụtara na CSS3 nyere ndị ọkachamara weebụ ọrụ ike ịgbakwunye foto ndị dị ka Photoshop na ibe ha. Nke a gụnyere ihe ndị dị ka ịmachi onyinyo na ọkụ , akụkụ ndị gbara ya gburugburu, na ihe ndị ọzọ. CSS3 gwakwara mmemme-dị ka mmetụta ndị a pụrụ iji mee ka mmekọrịta mmekọrịta dị mma na saịtị.
Otu mmetụta ihu ọma dị mma nke ị nwere ike itinye na ihe ndị dị na website gị site na iji CSS3 bụ ime ka ha daa na njikwa site na iji nchikota nke Njirimara maka opacity na mgbanwe. Nke a bụ ụzọ dị mfe na nke a kwadoro iji mee ka ibe gị dịkwuo mma site na ịmepụta ebe ndị gbawara agbawa nke na-abata na ya mgbe onye nleta na saịtị na-eme ihe, dịka ikpochapụ ihe ahụ.
Ka anyị leba anya na ọ dị mfe iji tinye mmetụta a na-emekọrịta mmekọrịta dị iche iche na ibe weebụ gị.
Kwee Opacity na Hover
Anyị ga-amalite site n'ile anya otú ị ga-esi gbanwee opacity nke ihe oyiyi mgbe onye ahịa na-ekpuchi ihe ahụ. Maka ihe atụ a (egosi HTML n'okpuru ebe a) Ana m eji ihe oyiyi na àgwà greydout.
Iji mee ka ọ nwekwuo obi ụtọ, anyị na-agbakwunye iwu ndị a na-esote anyị na CSS ụdị:
.greydout {
-obodo-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Ntọala opacity ndị a na-esi pasent 25%. Nke a pụtara na a ga-egosipụta onyinyo ahụ dị ka 1/4 nke nghọta doro anya ya. Okeghị oke ọ bụla na enweghị nghọta ga-abụ 100% mgbe 0% ga-abụ nke zuru oke.
Ọzọ, iji mee ka onyinyo ahụ doo anya (ma ọ bụ karia nke ọma karị, iji mezuo oke) mgbe a na-ekpuchi òké ahụ, ị ga-agbakwunye: pseudo-class:
.greydout: hover {
-obodo-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Ị ga-achọpụta na, maka ihe atụ ndị a, m na-eji nsụgharị nke ndị na-ere ahịa na-achịkwa iwu iji jide n'aka njikọta azụ maka nsụgharị agadi nke ndị nchọgharị ahụ. Ọ bụ ezie na nke a bụ ezigbo omume, nke bụ eziokwu bụ na nkwado opacity ugbu a na-akwado site na ihe nchọgharị na ọ bụ mma mma iji dobe ndị na-ere na-eserese edoghi. N'agbanyeghị nke ahụ, ọ dịghịkwa ihe mere ị ga-eji tinye ọkwa ndị a ma ọ bụrụ na ịchọrọ ịkwado nkwado maka nsụgharị nchọgharị. Naanị ijide n'aka na ị ga-agbaso omume kachasị mma a kwadoro iji kwụsị nkwupụta ahụ na ụdị nke a na-adịghị akọwapụta nke ụdị.
Ọ bụrụ na i tinyere nke a na saịtị, ị ga-ahụ na mgbanwe a opacity a bụ mgbanwe dị nnọọ nta. Nke mbụ ọ bụ isi awọ ma ọ bụrụ na ọ bụghị, na-enweghị mkparịta ụka n'etiti oge abụọ ahụ. Ọ dị ka mgba ọkụ - na ma ọ bụ gbanyụọ. Nke a nwere ike ịbụ ihe ịchọrọ, ma ị nwekwara ike ịnwale mgbanwe nke nwayọọ nwayọọ.
Iji tinye mmetụ dị mma ma mee ka nke a jiri nwayọọ nwayọọ gwụ, ịchọrọ ịtinye ihe onwunwe mgbanwe gaa na klas nke otu ụlọ akwụkwọ:
.greydout {
-obodo-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-nkpalite ihe ntinye aka: 3s niile nwere ike;
-moz-transition: niile 3s mfe;
-ms-transition: niile 3s mfe;
-o-mgbanwe: niile 3s dị mfe;
Transition: niile 3s dị mfe;
}
Site na koodu a, mgbanwe ahụ ga-eji nwayọọ nwayọọ jiri nwayọọ nwayọọ na-emegharị kama ịgbanarị ngwa ngwa.
Ọzọkwa, anyị na-eji ọtụtụ ụkpụrụ ndị na-ere ahịa ebe a. A naghị akwado usoro mgbanwe dị ka opacity, n'ihi ya, nkọwa ndị a nwere ezi uche.
Otu ihe ị ga-echeta mgbe ị na-eme atụmatụ atụmatụ ndị a bụ na ngwaọrụ ngebichi aka enweghị ọnọdụ "hover", ya mere mmetụta ndị a na-efu mgbe ọ bụla na onye ọ bụla na-eji ngwaọrụ ihuenyo mmetụ dịka ekwentị mkpanaaka. Mgbanwe ahụ ga-emekarị, ma ọ na-eme ngwa ngwa nke na ha apụghị ịhụ anya n'ezie. Nke ahụ dị mma ma ọ bụrụ na ị na-agbakwụnye nke a dịka mmetụta dị mma, ma zere mgbanwe ọ bụla achọrọ ka a ghọta maka ọdịnaya.
Ịgbachapu na-esi ike
Ikwesighi ịmalite site na ihe oyiyi a gbajiri agbaji, ị nwere ike iji transitions na opacity na-apụ na a kpam kpam opaque oyiyi. N'iji onyinyo ahụ, naanị otu klas nke na-arụ ọrụ:
klas = "withfadeout">
Dị nnọọ ka ọ dị na mbu, ị na-agbanwe opacity site na iji: hover selector:
.azụmahịa {
-agbanwe nnyefe: niile 2 na-adị nfe;
-moz-transition: niile 2s dị nfe;
-ms-transition: niile 2s dị nfe;
-o-mgbanwe: ihe niile 2 na-adị nfe;
Transition: niile 2 na-adị nfe;
}
.agbanyeghi: hover {
-obodo-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Na ihe atụ a, onyinyo ahụ ga-agbanwe site na ntụgharị zuru oke - ntụgharị nke ihe atụ mbụ anyị.
Ịgafe Ihe Ochie
Ọ bụ ihe magburu onwe ya na ị nwere ike itinye nsụgharị anya ndị a ma gbasaa ihe oyiyi, ma ị gaghị ejedebe nanị iji ihe oyiyi ndị a na-emepụta CSS. I nwere ike ime ka bọtịnụ CSS na-eme ngwa ngwa mgbe ị gụrụ ma jide. Ị ga-esetịpụ opacity site n'iji ya: klas na-arụ ọrụ ma tinye ntughari na klas nke na-akọwa bọtịnụ ahụ. Pịa ma jide bọtịnụ a iji hụ ihe merenụ.
O kwere omume ime ka ihe ọ bụla anya hụ n'anya mgbe ọ na-ekpuchi ma ọ bụ na-agagharị. N'ihe atụ a, m na-agbanwe opacity nke mgba na agba nke ederede mgbe nrucha ya gafere ya. Nke a bụ CSS:
#myDiv {
obosara: 280px;
ndabere-agba: # 557A47;
agba: #dfdfdf;
Na-akwagharị: 10px;
-agbanwe nnyefe: 4s niile nwere ike ịpụta 0s;
-moz-transition: niile 4s na-esi ike 0s;
-m-mgbanwe: niile 4s na-esi ike 0s;
-o-mgbanwe: niile 4s ọpụpụ 0s;
Transition: niile 4s na-esi ike 0s;
}
#myDiv: hover {
-obodo-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
agba: # 000;
}
Ndetu Mwugharị nwere ike ịrite uru site na agba agba agba
Na nchịkọta nhọrọ igodo a, ụcha agba na-agba nwayọọ nwayọọ ma na-apụ ka m na-akwagharị ihe nchịkọta nhọrọ. Lee bụ HTML:
- Home
- CSS3 Nkuzi
- Ngwa CSS3
Ma ebe a bụ CSS:
ul # sampleNav {ndepụta ndepụta: ọ dịghị; }
ul # sampleNav li {
igosi: inline;
ise n'elu: aka ekpe;
mpe akwa: 5px 15px;
oke: 0 5px;
-obodo-transition: niile 2s linear;
-moz-transition: niile 2s linear;
-ms-transition: niile 2s linear;
-o-mgbanwe: niile 2s linear;
Transition: niile 2s linear;
}
ul # sampleNav na {ederede-mma: ọ dịghị; }
ul # sampleNav li: hover {
ndabere-agba: # DAF197;
}
Nkwado Nchọgharị
Ka m metụrụ aka ugboro ole na ole ugbua, ụdị ndị a nwere ezigbo nkwado nchọgharị, n'ihi ya, ị ga-enwere onwe gị iji ha mee ihe ọ bụla n'enweghị nsogbu ọ bụla. Nanị otu n'ime nke a bụ ọtụtụ nsụgharị nke Internet Explorer, ma site na mkpebi Microsoft n'oge na-adịbeghị anya iji kwado nkwado maka nsụgharị niile nke IE n'okpuru 11, ndị nchọgharị ndị a na-aghọwanye ihe na - enweghị isi - na n'ezie, ọ bụrụ na onye nchọgharị nsị adịghị lee mgbanwe a, nke a ekwesịghị ịbụ nnukwu nsogbu. Ọ bụrụhaala na ị na-egbochi ụdị ọrụ ndị a ka ha nwee mmekọrịta dị mma ma ghara ịdabere na ha iji ụgbọala rụọ ọrụ ma ọ bụ kpughere ọdịnaya isi, mgbe ahụ, ndị nchọgharị ochie na-akwadoghị mmetụta ahụ ga-enwe ahụmahụ na-atọghị ụtọ, ma ndị ọrụ na ndị nchọgharị ahụ agaghịdị mara ihe dị iche, karịsịa ma ọ bụrụ na ha nwere ike iji saịtị ahụ dị ka ihe nkịtị ma nweta ozi ha chọrọ.
Gbanwee Egwuregwu; Swap abụọ Images
Nke a bụ ihe atụ nke etu esi ewepụ otu oyiyi n'ime ọzọ. Jiri HTML:
Na CSS nke na-eme ka onye zuru oke n'ụzọ zuru oke mgbe onye nke ọzọ na-arụ ọrụ nke ọma na mgbe ahụ mgbanwe na-eme ka abụọ ahụ nwee ike:
.swapMe img {-webkit-transition: niile 1 na-adị nfe; -moz-transition: niile 1s dị nfe; -ms-transition: niile 1s nwere ike-na-; -o-mgbanwe: niile 1s na-adị nfe; Transition: niile 1 na-adị nfe; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }