Transitions CSS3 Cruthaigh Éifeachtaí Céimnithe Nice
Bhí níos mó rialaithe ag teastáil ó dhearthóirí Gréasáin ar na leathanaigh a chruthaigh siad nuair a bhuail CSS3 an t-ardán. Thug na stíleanna nua a tugadh isteach i CSS3 deis do lucht gairmeacha gréasáin éifeachtaí cosúil le Photoshop a chur leis na leathanaigh. Áiríodh leis seo airíonna cosúil le scáthanna titim agus gluais , coirnéil chothromaithe, agus níos mó. Thug CSS3 éifeachtaí beochana isteach freisin ar féidir iad a úsáid chun idirghníomhaíocht deas a chruthú ar shuímh.
Is féidir le héifeachtaí radhairc an-deas is féidir leat a chur le heilimintí ar do láithreán gréasáin ag baint úsáide as CSS3 chun iad a dhéanamh céimnithe amach agus ag baint úsáide as meascán de na hairíonna le haghaidh dlúthpháirtíochta agus aistrithe. Is bealach éasca agus tacaithe é seo chun do chuid leathanaigh a dhéanamh níos idirghníomhach trí limistéir fadáilte a dhíríonn ar fhócas a dhéanamh nuair a dhéanann cuairteoir an láithreáin rud éigin, cosúil le cur isteach ar an eilimint sin.
Féach dúinn cé chomh héasca is é an éifeacht radharcach idirghníomhach seo a chur leis na heilimintí éagsúla ar do leathanaigh ghréasáin.
Athraitheacht Athraigh Let's # 39 s on Hover
Tosóimid ag féachaint ar an gcaoi a n-athrófar an íomhá nuair a bhíonn custaiméir ag taisteal thar an eilimint sin. Ar an sampla seo (léirítear an HTML thíos) Táim ag baint úsáide as íomhá le tréith rang greydout.
Chun é a dhéanamh amach, cuirfimid na rialacha stíl seo a leanas ar ár stílleabhair CSS:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
inmharthanacht: 0.25;
}
Aistríonn na suíomhanna dlúthmhaireachta seo go 25%. Ciallaíonn sé seo go léirítear an íomhá mar 1/4 dá thrédhearcacht gnáth. Go hiomlán teimhneach gan aon trédhearcacht bheadh 100% agus bheadh 0% go hiomlán trédhearcach.
Ansin, chun an íomhá a dhéanamh soiléir (nó níos cruinne, a bheith go hiomlán teimhneach) nuair a bhíonn an luch os a chionn, cuirfeadh tú an t-ainm: clóscríbhneoireachta:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
inmharthanacht: 1;
}
Tabharfaidh tú faoi deara, le haghaidh na samplaí seo, go bhfuil mé ag úsáid leaganacha réamhshocraithe an díoltóra den riail chun comhoiriúnacht siar a chinntiú do leaganacha níos sine de na brabhsálaithe sin. Cé gur dea-chleachtas é seo, is é an réaltacht go dtugann brabhsálaithe tacaíocht mhaith don riail éadrom agus tá sé sách sábháilte na línte réamhshocraithe díoltóra sin a scaoileadh. Mar sin féin, níl aon chúis ann gan na réimírí seo a chur san áireamh más mian leat tacaíocht a chinntiú do leaganacha breiseáin níos sine. Just a bheith cinnte go leanfaidh tú an dea-chleachtas a ghlactar leis an dearbhú a chríochnú leis an leagan gnáth, neamh-réamraithe den stíl.
Má d'úsáid tú é seo ar shuíomh, feicfeá go bhfuil an t-athrú oiriúnachta seo ina athrú go tobann. An chéad tá sé liath agus ansin níl sé, gan aon stáit eatramhacha idir an dá cheann. Tá sé cosúil le lasc solais - ar nó as. B'fhéidir gurb é seo a theastaíonn uait, ach b'fhéidir gur mhaith leat triail a bhaint as athrú atá níos de réir a chéile.
Le héifeacht an-deas a chur leis agus an céimnithe seo a dhéanamh de réir a chéile, ba mhaith leat an t-aistriú maoine a chur leis an rang .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
inmharthanacht: 0.25;
-webkit-transition: gach 3s éasca;
-moz-transition: gach 3s éasca;
-ms-transition: gach 3s éasca;
-o-idirthréimhse: éasca gach 3;
trasdul: éasca gach 3;
}
Leis an gcód seo, bheadh an t-athrú trasdul de réir a chéile seachas ag athrú go tobann.
Arís eile, táimid ag úsáid roinnt rialacha réitithe díoltóra anseo. Ní thacaítear chomh maith le hidirdhealú mar dhliteacht, mar sin bíonn ciall leis na réimírí seo.
Rud amháin a mheabhrú mar atá tú ag pleanáil na n-idirghníomhaíochtaí seo ná go bhfuil staid "hover" ag na feistí scáileán tadhaill, mar sin is minic a chailltear na héifeachtaí seo ar dhuine ar bith ag baint úsáide as gléas scáileáin tadhaill cosúil le fón póca. Is minic a tharlóidh an t-aistriú, ach a tharlaíonn sé chomh tapaidh nach féidir a fheiceáil i ndáiríre. Tá sé sin go maith má tá tú ag cur seo mar éifeacht bónas deas, ach níor cheart aon athruithe a d'fhéadfadh a bheith le feiceáil le haghaidh ábhar a thuiscint a sheachaint.
Is féidir le Fading Out ró-dhéanamh
Ní gá duit tús a chur le íomhá faded, is féidir leat aistrithe agus dlúthchumas a úsáid as íomhá iomlán teimhneach. Ag baint úsáide as an íomhá céanna, ní hamháin le haicme neamhchéimeáilte:
class = "withfadeout">
Díreach mar a rinneadh roimhe seo, athraíonn tú an chumas ag baint úsáide as: an roghnóir hover:
.withfadeout {
-webkit-transition: gach 2s éasca le teacht;
-moz-transition: gach 2s éasca le teacht;
-ms-transition: gach 2s éasca le teacht;
-o-idirthréimhse: gach ceann de na héascaí ar fad;
trasdul: gach ceathrú i bhfad níos faide;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
inmharthanacht: 0.25;
}
Sa sampla seo, bheadh an íomhá ag aistriú ó dhócmhainne go hiomlán trédhearcach - ar ais ar ár gcéad shampla.
Íomhánna Ag dul Beyond
Tá sé den scoth gur féidir leat na hidirbhealaí agus na huaireachtaí físe seo a chur i bhfeidhm ar íomhánna, ach níl tú teoranta do íomhánna a úsáid ach amháin leis na héifeachtaí CSS seo. Is féidir leat cnaipí CSS-styled a dhéanamh go héasca nuair a bhíonn siad cliceáil agus á gcoinneáil. Shocródh tú an dlúthpháirtíocht díreach ag baint úsáide as: pseudo-class gníomhach agus cuir an t-aistriú ar an rang a shainmhíníonn an cnaipe. Cliceáil agus cliceáil an cnaipe seo chun a fheiceáil cad a tharlaíonn.
Is féidir a dhéanamh go bunúsach aon chéanna físeán nuair a chuaigh sé thar a gcúl nó cliceáil ar. Sa sampla seo, athraigh mé inmhartacht an div agus dath an téacs nuair a bhíonn an luch os a chionn. Seo an CSS:
#myDiv {
leithead: 280px;
dath cúlra: # 557A47;
dath: #dfdfdf;
stuáil: 10px;
-webkit-transition: gach 4s éasca le 0s;
-moz-transition: gach 4s ease-out 0s;
-ms-transition: 4s ar fad a éascú amach;
-o-idirthréimhse: 4s ar fad a éascú amach;
trasdul: 4s ar fad a éascú amach;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
inmharthanacht: 0.25;
dath: # 000;
}
Is féidir le biachláir nascleanúna Sochar a bhaint as Dathanna Cúlra Fading
Sa roghchlár nascleanúna simplí seo déantar an dath cúlra a mhaolú go mall agus amach mar luch mé thar na míreanna roghchláir. Seo an HTML:
- Baile
- Ranganna Teagaisc CSS3
- Airíonna CSS3
Agus anseo tá an CSS:
ul # sampleNav {stíl liosta: none; }
ul # sampleNav li {
taispeáint: inlíne;
snámhphointe: ar chlé;
stuáil: 5px 15px;
imeall: 0 5px;
-webkit-transition: gach 2 líneach;
-moz-transition: gach 2 líneach;
-ms-transition: gach 2 líneach;
-o-aistriú: gach ceann 2 líneach;
trasdul: gach ceann 2 líneach;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
dath cúlra: # DAF197;
}
Tacaíocht Brabhsálaí
Mar a thug mé teagmháil le cúpla uair cheana féin, tá tacaíocht an bhrabhsálaí an-mhaith ag na stíleanna seo, mar sin ba chóir duit a n-úsáid gan aon tubaiste. Is é an t-aon eisceacht leis seo ná leaganacha i bhfad níos sine de Internet Explorer, ach le cinneadh déanaí Microsoft deireadh a chur le tacaíocht do gach leagan de IE faoi bhun 11, tá na brabhsálaithe níos sine seo ag éirí níos lú agus níos lú de cheist - agus go réalaíoch, mura ndéanann brabhsálaí níos sine féach an t-aistriú céimnithe seo, níor cheart go mbeadh fadhb mhór ann. Chomh fada agus a chuireann tú na cineálacha éifeachtaí sin in iúl go bhfuil idirghníomhaíochtaí taitneamhach agus nach bhfuil siad ag brath orthu chun feidhmiúlacht a thiomáint nó ábhar eochair a nochtadh, ní bhfaighidh brabhsálaithe níos sine nach dtacaíonn leis na héifeachtaí taithí níos lú taitneamhach, ach ní bheidh úsáideoirí ar na brabhsálaithe sin fiú tá a fhios ag an difríocht, go háirithe más féidir leo an suíomh a úsáid mar is gnáth agus an fhaisnéis a theastaíonn uait a fháil.
Spraoi Breise; Babhtáil Dhá Íomhánna
Seo sampla de conas íomhá amháin a chasadh go ceann eile. Bain úsáid as an HTML:
Agus an CSS a dhéanann ceann trédhearcach amháin agus an ceann eile tearcach agus ansin babhraíonn an t-aistriú an dá cheann:
.swapMe img {-webkit-transition: gach 1s éasca-in-out; -moz-transition: gach 1s éasca-in-out; -ms-transition: gach 1s éasca le teacht; -o-idirthréimhse: gach ceann is éasca le teacht; trasdul: gach duine ar a laghad; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; inmharthanacht: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; inmharthanacht: 0; }