CSS3 tranzisyon kreye efè fad bèl
Konsèpteur entènèt te gen tan vle plis kontwòl sou paj sa yo yo te kreye lè CSS3 frape sèn nan. Nouvo estil yo te entwodui nan CSS3 te bay pwofesyonèl entènèt kapasite pou ajoute efè fotoschop tankou paj yo. Sa a enkli pwopriyete tankou lonbraj gout ak ekla , awondi kwen, ak plis ankò. CSS3 prezante tou efè animasyon ki ka itilize pou kreye bèl interactivité sou sit.
Yon efè trè bèl vizyèl ou ka ajoute nan eleman nan sit entènèt ou a lè l sèvi avèk CSS3 se fè yo fennen nan ak soti lè l sèvi avèk yon konbinezon de pwopriyete yo pou stupidity ak tranzisyon. Sa a se yon fason fasil ak byen sipòte fè paj ou plis entèaktif pa kreye zòn ta vle chanje koulè ki antre nan konsantre lè yon vizitè sit fè yon bagay, tankou elikopte sou eleman sa a.
Ann pran yon gade nan ki jan fasil li se ajoute sa a entèraksyon efè vizyèl nan eleman divès kalite sou paj wèb ou ..
Kite Opazite Chanjman nan Hover
Nou pral kòmanse pa gade nan ki jan yo chanje stupidity a nan yon imaj lè yon kliyan ap plan sou eleman sa a. Pou egzanp sa a (HTML yo montre anba a) mwen itilize yon imaj ak atribi nan klas nan greydout.
Pou fè li greyed soti, nou ajoute règleman yo style sa yo CSS Stylesheet:
.greydout {
-webkit-stupidity: 0.25;
-moz-stupidity: 0.25;
stupidity: 0.25;
}}
Sa yo anviwònman stupidity tradwi a 25%. Sa vle di ke yo pral montre imaj la kòm 1/4 nan transparans nòmal li yo. Fully opak ki pa gen okenn transparans ta dwe 100% pandan y ap 0% ta dwe totalman transparan.
Next, fè imaj la vin klè (oswa plis presizyon, yo vin konplètman opak) lè se sourit la plane sou li, ou ta ajoute a: hover pseudo-klas:
.greyaj: hover {
-webkit-stupidity: 1;
-moz-stupidity: 1;
stupidity: 1;
}}
Ou pral remake ke, pou egzanp sa yo, mwen lè l sèvi avèk vandè a prefiks vèsyon nan règ la asire konpatibl bak pou pi gran vèsyon an sa yo navigatè. Pandan ke sa a se yon bon pratik, reyalite a se ke règ la stupidity se kounye a byen sipòte pa navigatè epi li se trè ki an sekirite yo lage liy sa yo machann prefiks. Toujou, pa gen okenn rezon ki fè tou pa enkli sa yo prefiks yo si ou vle asire sipò pou vèsyon ki pi ansyen navigatè. Jis asire w ke ou swiv pratik ki aksepte pi bon nan fini deklarasyon an ak vèsyon an nòmal, prefiks nan style la.
Si ou deplwaye sa a sou yon sit, ou ta wè ke ajisteman stupidity sa a se yon chanjman trè brid sou kou. Premye li nan gri ak Lè sa a, li pa, ki pa gen okenn eta pwovizwa ant de sa yo. Li tankou yon switch limyè - sou oswa sou. Sa a ka sa ou vle, men ou ka vle tou eksperyans ak yon chanjman ki pi plis gradyèl.
Pou ajoute yon efè reyèlman bèl, epi fè sa a gradyèl fennen, ou vle ajoute pwopriyete a tranzisyon nan klas la .Gadydout:
.greydout {
-webkit-stupidity: 0.25;
-moz-stupidity: 0.25;
stupidity: 0.25;
-webkit-tranzisyon: tout fasilite 3s;
-moz-tranzisyon: tout fasilite 3s;
-ms-tranzisyon: tout fasilite 3s;
-o-tranzisyon: tout fasilite 3s;
tranzisyon: tout 3s fasil;
}}
Avèk kòd sa a, chanjman an ta tranzisyon piti piti olye ke jis oblije chanje sibitman.
Yon fwa ankò, nou ap itilize yon kantite machann prix prix isit la. Tranzisyon an pa osi byen sipòte kòm stupidity, se konsa prefiks sa yo fè sans.
Youn nan bagay yo sonje jan ou planifye entèraksyon sa yo se ke aparèy manyen ekran pa gen yon eta "hover", kidonk efè sa yo souvan pèdi sou nenpòt moun ki lè l sèvi avèk yon aparèy manyen ekran tankou yon telefòn mobil. Tranzisyon an pral rive souvan, men li rive tèlman vit ke yo reyèlman pa ka wè. Sa se amann si w ap ajoute sa a kòm yon efè bonis bèl, men evite nenpòt chanjman ki bezwen yo dwe wè pou kontni yo dwe konprann.
Fading Out se posib tou
Ou pa bezwen kòmanse ak yon imaj ta vle chanje koulè, ou ka itilize tranzisyon yo ak stupidity fennen soti nan yon imaj konplètman opak. Sèvi ak imaj la menm, sèlman ak yon klas nan withfadeout:
klas = "withfadeout">
Jis tankou anvan, ou chanje stupidity a lè l sèvi avèk: seleksyon an hover:
.withfadeout {
-webkit-tranzisyon: tout 2s fasilite-an-soti;
-moz-tranzisyon: tout 2s fasilite-an-soti;
-ms-tranzisyon: tout 2s fasilite-an-soti;
-o-tranzisyon: tout 2s fasilite-an-soti;
tranzisyon: tout 2s fasilite-an-soti;
}}
.withfadeout: hover {
-webkit-stupidity: 0.25;
-moz-stupidity: 0.25;
stupidity: 0.25;
}}
Nan egzanp sa a, imaj la ta tranzisyon soti nan konplètman opak a yon jan transparan - ranvèse nan egzanp premye nou an.
Ale pi lwen pase Imaj
Li ekselan ke ou ka aplike tranzisyon vizyèl yo ak disparèt nan imaj, men ou pa limite a sèlman lè l sèvi avèk imaj ak efè CSS sa yo. Ou ka fasilman fè bouton CSS-estile ki fennen lè klike ak ki te fèt. Ou ta jis mete stupidity a lè l sèvi avèk la: aktif pseudo-klas epi li mete tranzisyon an sou klas la ki defini bouton an. Klike epi kenbe bouton sa a pou wè kisa k ap rive.
Li posib fè esansyèlman nenpòt eleman vizyèl eleman lè plane sou oswa klike sou. Nan egzanp sa a mwen chanje stupidity nan div la ak koulè nan tèks la lè sourit la se sou li. Isit la se CSS la:
#myDiv {
lajè: 280px;
background-koulè: # 557A47;
koulè: #dfdfdf;
padding: 10px;
-webkit-tranzisyon: tout 4s fasilite-soti 0s;
-moz-tranzisyon: tout 4s fasilite-soti 0s;
-ms-tranzisyon: tout 4s fasilite-soti 0s;
-o-tranzisyon: tout 4s fasilite-soti 0s;
tranzisyon: tout 4s fasilite-soti 0s;
}}
#myDiv: hover {
-webkit-stupidity: 0.25;
-moz-stupidity: 0.25;
stupidity: 0.25;
koulè: # 000;
}}
Navigasyon meni ka benefisye de Koulè background koulè manyen
Nan meni sa a navigasyon ki senp koulè koulè background nan disparèt dousman nan ak soti kòm mwen sourit sou atik yo meni. Isit la se HTML la:
- Kay
- CSS3 Leson patikilye
- CSS3 Pwopriyete
Ak isit la se CSS la:
UL # sampleNav {lis-style: Pa gen; }}
UL # sampleNav li {
ekspozisyon: aliye;
flote: agoch;
padding: 5px 15px;
Marge: 0 5px;
-webkit-tranzisyon: tout lineyè 2s;
-moz-tranzisyon: tout 2s lineyè;
-ms-tranzisyon: tout lineyè 2s;
-o-tranzisyon: tout lineyè 2s;
tranzisyon: tout lineyè 2s;
}}
UL # sampleNav li yon {tèks-decoration: Pa gen; }}
nan # echantiyon li: hover {
background-koulè: # DAF197;
}}
Navigatè sipò
Kòm mwen te manyen sou yon fwa kèk deja, estil sa yo gen trè bon sipò navigatè, kidonk, ou ta dwe santi yo lib yo sèvi ak yo san okenn twpidasyon. Sèl eksepsyon nan sa a se vèsyon ki pi ansyen nan Internet Explorer, men ak desizyon ki sot pase Microsoft a nan fen sipò pou tout vèsyon nan IE anba a 11, sa yo navigatè pi gran yo ap vin mwens ak mwens nan yon pwoblèm - ak reyalistikman, si yon navigatè ki pi gran pa fè sa gade tranzisyon sa a fennen, ki pa ta dwe yon gwo pwoblèm. Osi lontan ke ou konbine sa yo kalite efè nan entèraksyon agreyab epi yo pa konte sou yo nan kondwi fonctionnalités oswa revele kontni kle, Lè sa a, navigatè pi gran ki pa sipòte efè yo pral jwenn yon eksperyans mwens agreyab, men itilizatè sou sa yo navigatè pa pral menm konnen diferans lan, espesyalman si yo ka itilize sit la kòm nòmal epi pou yo jwenn enfòmasyon yo ke yo bezwen.
Ekstra plezi; Boukante de imaj
Isit la se yon egzanp sou fason yo fennen yon sèl imaj nan yon lòt. Sèvi ak HTML la:
Ak CSS la ki fè yon sèl konplètman transparan pandan ke lòt la se konplètman opak ak Lè sa a, tranzisyon an echanj de la:
.swapMe img {-webkit-tranzisyon: tout 1s fasilite-an-soti; -moz-tranzisyon: tout 1s fasilite-an-soti; -ms-tranzisyon: tout 1s fasilite-an-soti; -o-tranzisyon: tout 1s fasilite-an-soti; tranzisyon: tout 1s fasilite-an-soti; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-stupidity: 1; stupidity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-stupidity: 0; stupidity: 0; }}