CSS3 perėjimai Sukurkite gražų išblukimo efektus
Interneto dizaineriai ilgai norėjo daugiau kontroliuoti puslapius, kuriuos jie kuria, kai CSS3 pasiekė sceną. CSS3 pristatyti nauji stiliai suteikė žiniatinklio profesionalams galimybę savo puslapiams pridėti Photoshop tipo efektų. Tai apima tokias savybes kaip šešėliai ir švytėjimas , suapvalinti kampai ir dar daugiau. CSS3 taip pat pristatė animacinius efektus, kurie gali būti naudojami norint sukurti tinkamą svetainių interaktyvumą.
Vienas labai gražus vizualinis efektas, kurį galite pridėti prie savo svetainės elementų naudodamas CSS3, yra tai, kad jie išnyks ir išnyks, naudojant netikslumų ir perėjimo savybių derinį. Tai yra paprastas ir gerai palaikomas būdas, kad jūsų puslapiai būtų labiau interaktyvūs, sukuriant išblukusias sritis, kuriose dėmesys sutelktas, kai svetainės lankytojas kažką daro, pvz., Virš šio elemento.
Pažiūrėkime, kaip lengva pridėti šį sąveikaujantį vaizdinį efektą į įvairius elementus jūsų tinklalapiuose ..
Leiskite "Pakeisti neaiškumą", kai palieskite
Mes pradėsime nuo to, kaip pakeisti vaizdo nepermatomumą, kai klientas pradeda judėti virš šio elemento. Šiame pavyzdyje (HTML yra parodyta žemiau) Aš naudoju vaizdą su klasės greitojo atributo reikšme.
Jei norite, kad tekstas būtų pilkas, pridetume šias stiliaus taisykles su mūsų CSS stilių:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
neskaidrumas: 0,25;
}
Šie neskaidrumo nustatymai verčia 25%. Tai reiškia, kad vaizdas bus rodomas kaip 1/4 jo įprasto skaidrumo. Visiškai nepermatomas be skaidrumo būtų 100%, o 0% būtų visiškai skaidrus.
Toliau, norėdami, kad paveikslėlis būtų aiškus (ar tiksliau, tampa visiškai nepermatomas), kai pelė yra užveskite virš jos, pridedate: pervardykite pseudo-klasę:
.greydout: užveskite {
-webkit-opacity: 1;
-moz-opacity: 1;
neskaidrumas: 1;
}
Jūs pastebėsite, kad šiais pavyzdžiais aš naudoju iš anksto pateiktą versijos gamintoją, kad būtų užtikrintas ankstesnių šių naršyklių versijų suderinamumas. Nors tai yra gera praktika, realybė yra ta, kad naršyklių dabar gerai palaiko neskaidrumo taisyklę, ir yra gana saugu atsisakyti tų tiekėjų prefiksuotos linijos. Vis dėlto nėra priežasties neįtraukti šių prefiksų, jei norite užtikrinti paramą senesnėms naršyklės versijoms. Tiesiog būtinai laikykitės priimtos geriausios deklaracijos pabaigos praktikos, naudodamiesi įprasta, nepritaikyta stiliaus versija.
Jei jį įdėtumėte į svetainę, pamatytumėte, kad šis neskaidrumo koregavimas yra labai staigus. Pirma tai pilka, o tada ji nėra, be tarpinių valstybių tarp šių dviejų. Tai kaip šviesos įjungimas - įjungimas arba išjungimas. Tai gali būti tai, ko norite, bet taip pat galite pabandyti pasikeisti, kuris yra labiau palaipsnis.
Jei norite pridėti tikrai malonų efektą ir palengvinti šį išnykimą, norite pridėti perėjimo nuosavybę į .greydout klasę:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
neskaidrumas: 0,25;
-webkit-transition: visi 3s lengvai;
-moz-transition: visi 3s lengvumas;
-ms-transition: visi 3s lengvai;
-o-perėjimas: visi 3s lengvai;
perėjimas: visi 3s lengvai;
}
Naudojant šį kodą, pokytis pereis palaipsniui, o ne tiesiog staiga perjungiamas.
Dar kartą naudodamiesi nemažomis iš anksto nustatytomis prekybininkų taisyklėmis. Pereinamumas nėra taip gerai palaikomas kaip neskaidrumas, todėl šie prefiksai turi prasmę.
Vienas dalykas, kurį planuojate šia sąveika prisiminti, yra tai, kad jutiklinio ekrano įrenginiai neturi "užvedimo" būsenos, taigi šie efektai dažnai prarandami visiems, naudojantiems jutiklinio ekrano įrenginį, pvz., Mobilųjį telefoną. Dažnai įvyks perėjimas, tačiau tai vyksta taip greitai, kad jų tikrai neįmanoma pamatyti. Tai puiku, jei pridedate tai kaip malonų premijų efektą, bet vengiama bet kokių pakeitimų, kuriuos reikia matyti, kad turinys būtų suprastas.
Išnykimas taip pat gali
Jūs neturite pradėti su išblukusio vaizdo, galite naudoti perėjimus ir opacity išnyks iš visiškai nepermatomo vaizdo. Tame pačiame paveikslėlyje naudojamas tik su klasės "withfadeout":
class = "withfadeout">
Kaip ir anksčiau, pakeiskite neskaidrumą naudodamiesi: rodomasis pasirinkimas:
.withfadeout {
-webkit-transition: visi 2s lengvumas-out-out;
-moz-transition: visi 2s lengvumas-out-out;
-ms-transition: visi 2s lengvumas-out-out;
-O-transition: visi 2s lengvumas-out-out;
perėjimas: visi 2s lengvumas-out-out;
}
.withfadeout: užveskite {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
neskaidrumas: 0,25;
}
Šiame pavyzdyje vaizdas pereis nuo visiškai nepermatomo iki šiek tiek skaidrus - atvirkščiai - mūsų pirmasis pavyzdys.
Going Over Images
Puiku, kad galite pritaikyti šiuos vaizdinius perėjimus ir nuvilti į vaizdus, bet jūs neapsiribojote tiesiog vaizdų naudojimu naudodami šiuos CSS efektus. Galite lengvai padaryti CSS stiliaus mygtukus, kurie išnyks spustelėjus ir laikant. Jūs tiesiog nustatote nepermatomumą naudodami: aktyvų pseudo-klasę ir perkelkite klasei apibrėžtą mygtuką. Spustelėkite ir laikykite šį mygtuką, kad pamatytumėte, kas atsitiks.
Galima iš esmės supaprastinti bet kokį vaizdinį elementą, kai jis nukreiptas arba spustelėjo. Šiame pavyzdyje pakeičia div skaidrumą ir teksto spalvą, kai pelė yra virš jos. Štai CSS:
# myDiv {
plotis: 280 pikselių;
fono spalva: # 557A47;
spalva: #dfdfdf;
padding: 10px;
-webkit-transition: visi 4s lengvumas 0s;
-moz-transition: visi 4s lengvumas 0s;
-ms-perėjimas: visi 4s palengvinti 0s;
-O-perėjimas: visi 4s palengvinti 0s;
perėjimas: visi 4s palengvinti 0s;
}
# myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
neskaidrumas: 0,25;
spalva: # 000;
}
Navigacijos meniu gali pasinaudoti fading fono spalva
Šiame paprastame naršymo meniu fono spalva lėtai išnyksta ir išnyksta, kai pelėsiu virš meniu elementų. Štai HTML:
- Namai
- CSS3 pamokos
- CSS3 ypatybės
Čia yra CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
rodyti: inline;
plūdė: kairė;
padding: 5px 15px;
marža: 0 5px;
-webkit-transition: visi 2s linijiniai;
-moz-transition: visi 2s linijiniai;
-ms-transition: visi 2s linijiniai;
-o-perėjimas: visi 2s linijiniai;
perėjimas: visi 2s linijiniai;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
fono spalva: # DAF197;
}
Naršyklės palaikymas
Kalbant apie keletą kartų, šie stiliai turi labai gerą naršyklės palaikymą, todėl jūs turite jaustis laisvai juos naudoti be jokio triukšmo. Vienintelė išimtis yra daug senesnių "Internet Explorer" versijų, tačiau neseniai priimtame "Microsoft" sprendime nutraukti visų IE versijų versiją iki 11, šios senesnės naršyklės tampa vis mažiau ir mažiau problemos - ir realiai, jei senesnė naršyklė pamatyti šį išnykimo perėjimą, tai neturėtų būti didelė problema. Toliau, kai apribosite tokius efektus naudingoms sąveikoms ir nenaudosite jų funkcionalumui vairuoti arba pagrindinio turinio atskleidimui, tada senesnės naršyklės, kurios nepalaiko efektų, gaus mažiau patrauklios patirties, tačiau vartotojai tose naršyklėse net nebus. žinoti skirtumą, ypač jei jie gali naudoti svetainę kaip įprasta ir gauti reikiamą informaciją.
Papildoma pramoga; pakeiskite du vaizdus
Štai pavyzdys, kaip išmesti vieną vaizdą į kitą. Naudokite HTML:
Ir CSS, kuris daro visišką skaidrumą, o kitas visiškai neskaidrus, o po to - perėjimo apsikeitimo sandorius:
.swapMe img (-webkit-transition: visi 1s lengvumas-out-out; -moz-transition: visi 1s lengvumas-out-out; -ms-transition: visi 1s lengvumas-out-out; -o-transition: visi 1s lengvumas-out-out; perėjimas: visi 1s lengvumas-out-out; } .swap1, .swapMe: užveskite .swap2 {-webkit-opacity: 1; -moz-opacity: 1; neskaidrumas: 1; } .SwapMe: užveskite .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; neskaidrumas: 0; }