Hvordan lage et bakgrunns overgang med CSS
I motsetning til animasjoner, CSS overganger animere endringer mellom standard og hover statene Web sideelementer. Hover staten er lik en rollover, et element av en side som endres når en bruker "svever" henne musen over det. Overganger brukes til CSS egenskaper - bakgrunnsfarger, grenser, skriftstørrelser og andre stiler du kan stille - slik at hvis det er en forskjell i hvordan eiendommen ligger på en del av siden når en bruker svever over det, snarere enn en brå endring, vil du se en gradvis, animerte endring.
Bruksanvisning
1 Åpne HTML-filen for din webside i en kode editor eller Notisblokk. Finn elementet der du vil bruke en overgang til en bakgrunn, for eksempel et bilde, div eller skjemafelt:
<Div id = "transition_me">
Innhold her ...
</ Div>
Kontroller at koden har en ID navn og legg merke til den til senere. Hvis koden ikke har en ID, legge til en som vist ovenfor.
2 Åpne CSS filen din webside bruker som sin stilark. Hvis siden ikke bruker en CSS-fil, kan du legge CSS mellom et par av "<style>" koder i hodet av HTML-kode:
<Head>
<Title> Your Side Tittel Her </ title>
<Style type = "text / css">
<! - CSS koden går her ->
</ Style>
</ Head>
I dette eksempelet kodene rundt "CSS koden går her" gjør at teksten en kommentar at nettleseren ikke lese.
3 Skriv en stil regel som velger elementet ved sin ID. Lag en andre stil regel som velger elementet av sin ID bare når brukeren svever over det:
transition_me {
}
transition_me: hover {
}
Stilene satt inne i første stilen regelen er nå standard stiler av elementet. Når brukeren svever musen over det elementet, ser leseren til regelen med ": hover" for å bruke forskjellige stiler.
4 Sett en eiendom og verdi innenfor den første stilen regelen:
transition_me {
background-color: lyseblå;
}
Dette eksemplet bruker "background-color" eiendom. Andre bakgrunns egenskaper inkluderer bakgrunnsbilde, background-størrelse, background-repeat og background-posisjon. Du kan overføre noen av disse egenskapene.
5 Sett endret bakgrunn i andre stil regelen:
transition_me: hover {
background-color: mørkblå;
}
Så langt, når brukeren svever over "transition_me" div, blir div fra lys blå til mørk blå uten en overgang.
6 Påfør en overgang til en eiendom innenfor den første stilen regelen. CSS Eiendommen er "overgang", og det tar to verdier: navnet på den eiendommen du ønsker å bruke overgangen effekt på og hastigheten på overgangen. Hvis du ønsker å gå over div bakgrunnsfarge, kan du bruke denne koden:
transition_me {
background-color: lyseblå;
overgang: background-color 5s;
}
Fart er angitt i sekunder.
7 Duplisere "overgang" eiendom og dens verdier tre ganger. Legg en nettleser prefiks til hvert duplikat, som vist:
overgang: background-color 5s;
-moz-overgang: background-color 5s;
-webkit-overgang: background-color 5s;
-O-overgang: background-color 5s;
Som for skriving av denne artikkelen, overganger krever leser prefikser. Selv om det ennå ikke er funksjonell, "overgang" uten et prefiks sikrer koden vil fungere i senere nettlesere som støtter dette. Per dato for offentliggjøring, er støtte for overganger finnes i Firefox, Chrome, Safari og Opera, men Opera fades bakgrunnen når du først laste inn siden.
Hint
- Nettlesere som støtter overganger støtter også mange relaterte egenskaper som styrer forsinkelsestider og lettelser.
- Internet Explorer 9 støtter ikke overganger. Når brukere besøker en nettside som har overganger i IE 9, ser de på kurset som om overgangene ikke eksisterte, men alle elementer og svever statene fortsatt arbeid. Bruk en jQuery script som en reserveløsning for IE nettlesere hvis disse brukerne må også se overgangene.