CSS3 nā hana hoʻololi i ka hana maikaʻi
Ua makemake nui nā mea hoʻolāki pūnaewele i ka manaʻoi aʻe ma luna o nāʻaoʻao i hakuʻia e lākou i ka wā e loaʻa ai iā CSS3 kahi iʻikeʻia. ʻO nāʻano hou i hoʻokomoʻia i CSS3 hāʻawi i nāʻoihana pūnaewele i ka hiki ke hoʻoulu i nā hopena Photoshop i ko lākou mauʻaoʻao. Ua komo kēia i nāʻano e like me nā aka hoʻonani a me nā uila , a puni nā kihi, aʻoi aku. Ua hoʻolako pū aku nō hoʻiʻo CSS3 i nā hopena animona e hiki ke hoʻohanaʻia e hana i ka pilina maikaʻi ma nā pae.
Hiki iāʻoe ke hoʻohui i nā'enewa i kāu pūnaewele ma o ka hoʻohanaʻana i ka CSS3 e hoʻokuʻiʻia i loko a me waho ma ka hui pūʻana o nā waiwai no ka opacity a me ka hoʻololi. He wahi maʻalahi a hākoʻoʻia kēia i ka hanaʻana i kāu mauʻaoʻao i ka pilina ma o ka hanaʻana i nā wahi mehameha i hiki ke hoʻokūkū i ka manawa e hana ai kahi mea malihini kipa i kahi mea, e like me ka hoʻolālāʻana i kēlā mea.
E nānā i ka maʻalahi o ka hoʻohuiʻana i kēia hana hulina i nāʻano likeʻole ma kāu mau pūnaewele.
Eʻae i ka ikaika i ka holoʻana
E hoʻomaka mākou ma ka nānāʻana i kahi e hoʻololi ai i ka opacity o ke kiʻi ke paʻi ka mea kūʻai ma luna o kēlā mea. No kēia hiʻohiʻona (hōʻikeʻia ka HTML ma lalo nei) Ke hoʻohana nei au i kiʻi me ka hoʻohālike o ka papa kila.
No ka hauʻoliʻana, hoʻokomo mākou i nā rulaʻano i kā mākou CSS stylesheet:
.leydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Hoʻopili kēia mau koho opacity i 25%. ʻO keʻano, e hōʻikeʻia ke kiʻi i 1/4 o kona māliko maʻamau. ʻO ke opaque pihaʻole me ka liʻiliʻiʻole e 100% aʻo 0% e maopopo loa.
A laila, e hoʻomaopopoʻia ke kiʻi (aʻoi aku paha, i piha i ka'opaque) i ka manawa e uhiʻia ai kaʻiole ma luna o ia mea, e hoʻohuiʻoe i kēia: pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Eʻikeʻoe i kēia, no kēia mau hiʻohiʻona, ke hoʻohana nei au i nā mana o nā māna kūʻai mua o ka hoʻomalu no ka hōʻoiaʻiʻoʻana i ka hoʻokaʻalikeʻana no nā hanauna kahiko o kēlā mau pūnaewele. ʻOiai he hana maikaʻi kēia,ʻo kaʻoiaʻiʻo,ʻo ke kākoʻo opacity i kēia manawa ua kākoʻo maikaʻiʻia e nā mea kelepona a ua palekana loa ka waihoʻana i nā laina laina i kauʻia. Akā,ʻaʻohe kumu e hoʻokomoʻole ai i kēia mau prefix inā makemakeʻoe e hōʻoiaʻiʻo i ka kākoʻo no nā pūnaewele pūnaewele mua. Eʻoluʻolu e hahai i ka maikaʻi maikaʻi loa i ka hoʻopauʻana i ka hōʻike me keʻano maʻamau o ka'ōnaehana.
Ināʻoe e hoʻolālā i kēia ma kahi pūnaewele,ʻikeʻoe i kēia hoʻololi o ka hoʻololiʻana i kahi loli maʻamau. ʻO ka mua, he poʻo hina a lailaʻaʻole ia, me kaʻole o ka palena manawa ma waena o kēlā mau meaʻelua. Ua like ia me ke kukui uila - iʻole a hemo. ʻO kēia paha ka mea āu e makemake nei, akā makemake pahaʻoe e hoʻokolo i kahi loli e piʻi malie.
No ka hoʻouluʻana i kahi mana maikaʻi loa a hoʻololi i kēia melahi, makemakeʻoe e hoʻohui i ka waiwai hoʻololi i ka papa .greydout:
.leydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-hopkit-transition: hiki i nā mea a pau keʻoluʻolu;
-moz-hoʻololi: hiki i nā mea a pau 3 ke pale;
-ms-transition: hiki i nā mea a pau 3 ke pale;
-o-hoʻololi: hiki i nā mea a pau keʻoluʻolu;
hoʻololi: hiki i nā mea a pau keʻoluʻolu;
}
Me kēia code, hiki ke hoʻololi i ka hoʻololiʻana ma mua o ka hoʻololi waleʻana i ka loli.
Eia hou, ke hoʻohana nei mākou i kekahi mau ture i kūʻaiʻia ma mua. ʻAʻole i kākoʻo maikaʻiʻia ka transition e like me ka opacity, no laila ua maʻalahi kēia mau prefix.
Hoʻokahi mea e hoʻomanaʻo i kāu e noʻonoʻo ana i kēia mau pilinaʻanaʻo ia nā pāʻani'ōkuhi iʻole he "hover" state, no laila ua loli kēia mau mea i kekahi mea hoʻohana me ka'ōkuhi lima pahi like me ke kelepona. E loli pinepine ka hoʻololiʻana, akā, e hiki wawe mai ana iʻole hiki keʻikeʻia. He maikaʻi kēia ināʻoe e hoʻohui nei i kēia ma keʻano he maikaʻi maikaʻi maikaʻi, akā, e pale i nā loli iʻikeʻoleʻia no ka hoʻomaopopoʻana o nā mea.
Hiki i ke paʻiʻana
ʻAʻole ponoʻoe e hoʻomaka me kahi kiʻi pauʻole, hiki iāʻoe ke hoʻohana i nā hoʻololi a me ka opacity e haʻalele i kahi kiʻi piha. Ke hoʻohana 'ana i ke kiʻi like, me kahi papa hana wale no:
papa = "withfadeout">
E like me ka wā ma mua, hoʻololiʻoe i ka opacity me ka: hover selector:
.ahelena {
-conkit-transition: nā 2 a pau i kaʻoluʻolu-i waho;
-moz-hoʻololi: nā 2 a pau i kaʻoluʻolu-i waho;
-ms-transition: nā 2 a pau i ka pale-i waho;
-o-hoʻololi: nā 2 a pau i kaʻoluʻolu-i waho;
ke hoʻololi: nā 2 a pau i kaʻoluʻolu;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Ma kēia hiʻohiʻona, e hoʻololi ka kiʻi mai ka'ōhumu o ka'ōhumu a hiki i ka liʻiliʻi -ʻo ka hope o kā mākou kumu mua loa.
Hele i nāʻaoʻao o nāʻaoʻao
He maikaʻi ia hiki iāʻoe ke hoʻohana i kēia mau kiʻi kiʻi a pau i nā kiʻi, akāʻaʻoleʻoe i kaupalenaʻia i ka hoʻohana waleʻana i nā kiʻi me kēia hopena CSS. Hiki iāʻoe ke hana i nā pihi CSS-styled i hāʻule i ka pāʻana a hoʻopaʻaʻia. Hiki iāʻoe ke hoʻonohonoho i ka opacity me ka: pseudo-class active a kau i ka hoʻololi i ka papa e kuhikuhi ana i ke pihi. Kaomi a hoʻopaʻa i kēia pihi eʻike ai i ka mea e hana ana.
Hiki ke hana i kekahi meaʻike keʻakeʻa i ka wā i hoʻokuʻuʻia aiʻole i kaomiʻia. Ma kēia hana, hoʻololi au i ka opacity o ka māhele a me ke kele o ka kikokikona i ka manawa e paʻa ai kaʻiole. Eia ka CSS:
LIKE LIKE LIKE
ke whānui: 280px;
ʻike mua-kaʻe: # 557A47;
lepe: #dfdfdf;
ka pale: 10px;
-conkit-transition: 4s noa-outs 0s;
-moz-hoʻololi: nā 4s noa-lele 0s;
-ms-transition: 4s noa-lele 0s;
-o-hoʻololi: nā 4s a pau-lele 0s;
ke hoʻololi: nā 4s a pau-lele 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
lepe: # 000;
}
Hiki iā lākou ke hoʻololi i kaʻikeʻana
Ma kēia papa koho koho maʻamau, ua lohi mālie ka lae āpau i ka puka a me ka hoʻokuʻuʻana i nā mea koho. Eia ka HTML:
- Home
- CSS3 Kūkākūkā
- Nā Kuleana CSS3
Eia ka CSS:
ul # sampleNav {inoa inoa-ʻaʻohe; }
ul #
hōʻike: inline;
ka lana: haʻalele;
pali: 5px 15px;
Mahele: 0 5px;
-e hoʻolālā-pūnaewele: nā laina 2 a pau;
-moz-hoʻololi: nā laina 2 a pau;
-ms-transition: nā laina 2 a pau;
-o-transition: nā laina 2 a pau;
ke hoʻololi: nā laina 2 a pau;
}
ul # sampleNav li a {kāhiko-mea-nani:ʻaʻohe; }
ul # lila li li: hover {
ʻike mua-ka: # DAF197;
}
Kōkua Palekana
Me aʻu i hoʻopā pinepine ai i kēia mau manawa, ua loaʻa i kēia mau kāleka ke kākoʻo pūnaewele maikaʻi loa, no laila, ponoʻoe e noʻonoʻo e hoʻohana me kaʻole o ka haʻalulu. ʻO kahi wale nō i kēia aʻoi aku nāʻanoʻoi aku o nā polokalamu o Internet Explorer, akā me ka hoʻoholo hope loa a Microsoft no ka hoʻopauʻana i ke kākoʻo no nā puka a pau o IE i lalo o ka 11, ua lilo kēia mau meaʻelemakule i ka liʻiliʻi a me ka emiʻole o ka pilikia - aʻoiaʻiʻo, eʻike i kēia hoʻololi hoʻololi,ʻaʻole ia he pilikia nui loa. I kou wā e hoʻopaʻa ai i kēiaʻano o ka hopena i mea eʻoluʻolu ai ka pilina aʻaʻole e hilinaʻi iā lākou no ka hoʻokuʻuʻana i ka hana a iʻole e hōʻike i ka'ikeleona, a laila,ʻo ka meaʻikeʻole i nā hopena, eʻikeʻia ka hopena o kaʻike. ʻike i kaʻokoʻa, inā paha hiki iā lākou ke hoʻohana i ka pūnaewele kūpono a loaʻa kaʻike e pono ai lākou.
Haʻawina Hou; E hoʻolua i nā kiʻiʻelua
Eia keʻano hoʻohālike o ka hanaʻana i hoʻokahi kiʻi i kekahi. E hoʻohana i ka HTML:
Aʻo ka CSS ka mea e maopopo ai i ka maopopo o ka mea'ē aʻe i ke opaque a laila hoʻoheheʻe ka hoʻololi i nā meaʻelua:
.swapMe img--kitkit-transition: nā mea āpau a pau i waho; -moz-hoʻololi: nā mea āpau a pau i waho; -ms-transition: nā māmā 1 a pau; -o-hoʻololi: nā māmā 1 a pau; ke hoʻololi: nā mea a pau i ka hoʻopili-i waho; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }