Skip to main content

Tee verkkosivun elementit Fade In ja Out CSS3: lla

Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie (Kesäkuu 2025)

Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie (Kesäkuu 2025)

Sisällysluettelo:

Anonim

Web-suunnittelijat olivat jo pitkään halunneet hallita sivuja, jotka he olivat luoneet, kun CSS3 osui kohtaukseen. CSS3: ssa tuodut uudet tyylit antoivat web-ammattilaisille mahdollisuuden lisätä sivuilleen Photoshop-tyyppisiä vaikutuksia. Tämä sisälsi ominaisuuksia, kuten pudotusvarjoja ja hehkuja, pyöristettyjä kulmia ja paljon muuta. CSS3 esitteli myös animoituja vaikutuksia, joita voidaan käyttää luomaan hyvää vuorovaikutteisuutta sivustoissa.

Yksi erittäin mukava visuaalinen vaikutus, jonka voit lisätä elementteihin verkkosivustollasi CSS3: n avulla, on tehdä niistä haalistuminen sisään ja ulos käyttäen ominaisuuksien yhdistelmää opasiteetille ja siirtymiselle. Tämä on helppo ja hyvin tuettu tapa tehdä sivuillesi vuorovaikutteisempi luomalla haalistuneita alueita, jotka tulevat keskittymään, kun sivuston kävijä tekee jotain, kuten liikkumista kyseisen elementin yli.

Katsotaanpa, kuinka helppoa on lisätä tämä vuorovaikutteinen visuaalinen vaikutus eri elementteihin verkkosivuilla.

Vaihda peittävyys hiirellä

Aloitamme tarkastelemalla kuvan peittävyyden muuttamista, kun asiakas liikkuu kyseisen elementin päälle. Tässä esimerkissä (HTML on alla) käytämme kuvaa, jonka luokan attribuutti on

greydout.

Sävyttämiseksi lisäämme CSS-tyylitaulukkoon seuraavat tyylisäännöt:

.greydout {-webkit-opasiteetti: 0,25;-moz-opasiteetti: 0,25;opasiteetti: 0,25;}

Nämä peittävyysasetukset ovat 25%. Tämä tarkoittaa sitä, että kuva näytetään 1/4 tavallisesta läpinäkyvyydestä. Täysin läpinäkyvä ilman läpinäkyvyyttä olisi 100%, kun taas 0% olisi täysin avointa.

Seuraavaksi, jotta kuva muuttuu kirkkaaksi (tai tarkemmin, jotta se muuttuu täysin läpikuultavaksi), kun hiiri liipataan sen yli, lisäät

: hoverpseudo-luokka: .greydout: hover {-webkit-opasiteetti: 1;-moz-opasiteetti: 1;opasiteetti: 1;}

Huomaat, että näissä esimerkeissä käytämme säännön myyjän prefixed versioita varmistaaksemme taaksepäin yhteensopivuuden näiden selainten vanhempien versioiden kanssa. Vaikka tämä on hyvää käytäntöä, todellisuus on se, että selaimet tukevat nyt peittävyyden sääntöä, ja on melko turvallista pudottaa kyseisten valmistajien prefiksit. Silti ei ole mitään syytä olla sisällyttämättä näitä etuliitteitä, jos haluat varmistaa vanhempien selainversioiden tuen. Varmista, että noudatat hyväksyttyjä parhaita käytäntöjä ilmoituksen lopettamisesta tavanomaisella, ennalta määritellyllä tyylillä.

Jos otit tämän käyttöön sivustolla, näet, että tämä opasisuuntaus on hyvin äkillinen muutos. Ensinnäkin se on harmaa, ja silloin se ei ole, ilman väliaikaa näiden kahden välillä. Se on kuin valokytkin - päälle tai pois päältä. Tämä voi olla mitä haluat, mutta voit myös kokeilla muutosta, joka on asteittaisempaa.

Jos haluat lisätä todella mukavan vaikutelman ja tehdä haalistumisesta asteittain, lisää se

siirtyminen

omaisuus

.greydoutluokka: .greydout {-webkit-opasiteetti: 0,25;-moz-opasiteetti: 0,25;opasiteetti: 0,25;-webkit-transition: kaikki 3s helposti;-moz-siirtyminen: kaikki 3s helpottavat;-ms-transition: kaikki 3s helppous;-o-siirtyminen: kaikki 3s helpottavat;siirtyminen: kaikki 3: n helppous;}