Hvordan Slide bokser med CSS
Før de relativt nye Web gripende stilark, eller CSS, standard --- CSS3 --- designere måtte lage enkle animasjoner, for eksempel en boks som glir over eller opp og ned en webside med Flash. CSS3, en web-element formatering språk, kan du lage disse typer animasjoner med stilark innebygd i HTML-koden. HTML er den dominerende Web kodespråk. Fordelen med å bruke CSS3 å lage enkle animasjoner er at CSS-kode ikke krever brukerens nettleser for å laste ned ressurskrevende ekstern Flash-filer.
Bruksanvisning
1 Start en ny webside i programmet du bruker til å redigere HTML. Du kan bruke industristandard XHTML Transitional doctype for siden. Start koden skal se slik ut:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<Title> Animasjon </ title>
<Title> -taggen par kan selvsagt inneholde noen tittel du ønsker.
2 Lag CSS boksen velgeren. I CSS, definerer en velger et objekt eller et område på siden. Du kan lage boksen alle størrelser og fargen du ønsker. Følgende CSS kode oppretter en svart boks på 200 av 200 piksler. Plasser den rett under <title> -taggen par.
<Style>
box {
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 0px;
venstre: 0px;
}
For å redigere størrelsen på boksen endrer "width" og "height" eiendom. For å endre boksen farge, redigere "background-color" eiendom. De siste tre egenskapene satt i boksen posisjon --- i dette tilfellet, øverst i venstre hjørne på siden.
3 Lag CSS animasjon regulering. Følgende kode bruker WebKit utvidelser, som fungerer med de fleste nettlesere. Plasser den rett under boksen velgerkoden.
.squarePath {
-webkit-animasjon-navn: squarePath;
-webkit-animasjon-varighet: 8s;
-webkit-animasjon-timing-funksjon: lette-in-out;
-webkit-animasjon-iterasjon-count: uendelig;
}
Den "webkit-animasjon-navn" eiendom definerer navnet på animasjonen for å registrere i Javascript-kode som kjører animasjonen. De neste tre egenskapene satt animasjonen varighet til 8 sekunder, med og i-og-ut letthet og en uendelig iterasjon teller. "Enkel" er en animasjon spesiell effekt som skaper pauser langs animasjon banen. En enkel satt til "in-out" pause i begynnelsen og slutten av banen. For å stoppe en animasjon ved bare begynnelsen av banen, vil du bruke "lette-in", for eksempel. Den "gjentakelse-count" angir antall ganger animasjonen utfører. "Infinite" er en endeløs animasjon.
4 Lag animasjon banen velgeren. Følgende kode oppretter en fire-punkts, firkantet bane. Boksen glir over på siden til høyre, ned på siden, på tvers av siden til venstre, og deretter opp på siden til opprinnelig posisjon. Plasser den rett under koden du opprettet i trinn 3.
@ -webkit-Nøkkel squarePath {
fra {
top: 0px;
venstre: 0px;
}
25% {
top: 0px;
venstre: 200px;
}
50% {
top: 200px;
venstre: 200px;
}
75% {
top: 200px;
venstre: 0px;
}
100% {
top: 0px;
venstre: 0px;
}
}
</ Style>
Legg merke til at de "topp" og "venstre" egenskaper fortelle animasjon der, målt i piksler, for å stoppe skyve boksen. Den </ style> tag stenger CSS-koden.
5 Opprett Javascript. Følgende kode utfører animasjonen i henhold til instruksjonene satt opp i CSS-velgere. Plasser den rett under </ style> lukking tag.
<Script type = "text / javascript">
funksjon flytte () {
document.getElementById("box").className = "squarePath";
}
</ Script>
</ Head>
Legg merke til at manuset vet hvilke instruksjoner om å bruke ved å referere til "squarepath" velger du opprettet i trinn 3. </ head> tag stenger hodet delen av siden.
6 Plasser animasjon i kroppen delen av siden. Kroppen delen er der sideelementer vises. Følgende kode forteller leseren som CSS velgeren å bruke ved å referere til "#box" velger du opprettet i trinn 2. Plasser denne koden rett under </ head> lukking tag.
<Body onload = "move ()">
<Div id = "box">
</ Div>
</ Body>
</ Html>
Den "onload =" eiendom forteller nettleseren for å starte animasjonen når siden lastes. </ Body> -koden stenger kroppen delen av siden, og </ html> -taggen stenger, eller ender, websiden.
Hint
- Du kan endre denne animasjonen på mange måter, blant annet boks form, størrelse og farge, samt animasjon banen og letthet, ved å erstatte de eksisterende CSS3 egenskaper med andre gyldige egenskaper. Du finner en fullstendig liste over gyldige CSS3 egenskaper på W3C nettstedet. W3C er konsortiet som utvikler og vedlikeholder webstandarder.
- Ikke alle nettlesere støtter WebKit utvidelser. Men de som ikke vanligvis har utvidelser av sine egne, for eksempel .moz for Mozilla-baserte nettlesere. Det er ikke uvanlig å måtte lage flere versjon av CSS-kode for å få plass til alle nettlesere.