CSS3: Dynamisk grafikk ved bruk av nye overgangs- og transformasjonsegenskaper

Dette segmentet på CSS3 vil gjennomgå overganger og transformere to egenskaper som legger til animasjonseffekter. Det som typisk har involvert mye JavaScript tidligere for dynamisk grafikk, kan nå kodes med CSS-animasjonsegenskaper.

overganger

CSS3-overganger er en del av W3C Working Draft offisielt med tittelen CSS Transitions Module Level 3. Det gir spesifikasjonen som gjør at egenskapsendringer i CSS-verdier kan skje jevnt når de endres fra en verdi til en annen over en spesifikk varighet.

I henhold til overgangsegenskapen, når verdien av en CSS-eiendom endres, blir det gjengitte resultatet øyeblikkelig oppdatert, og de berørte elementene endres umiddelbart fra den gamle eiendomsverdien til den nye eiendomsverdien. Denne delen av spesifikasjonen beskriver en måte å stipulere overganger ved å bruke nye CSS-egenskaper.

CSS3-overganger involverer faktisk flere egenskaper som er definert for overgangseiendommen: overgangsvarigheten, overgangstidsfunksjonen, overgangsforsinkelsen og overgangen, som er den korte metoden for alle fire egenskapene.

Overgangsegenskapen godtar en kommaseparert liste over verdier som lar flere overganger defineres med hver handling på en annen egenskap og spesifisere hvilken egenskap som skal animeres, for eksempel uklarhet, venstre, topp, bredde. Syntaksen for å representere overgangseiendommen er som følger:

 overgang-eiendom: ingen | alle | 'eiendom' 

Her er verdiene forklart:

  • Ingen : Det er ingen overgang brukt.
  • Alt: Enhver eiendom som kan gjennomgå en overgang, vil gjøre det; Ellers er det gitt en liste over eksakte spesifiserte egenskaper som skal overføres.

Nedenfor er et eksempel på overgangseiendommen, som viser et avsnitt med en solid 4px kant med 400px bredde og alt tekstinnhold for å overføre på svevet med en lineær opacitet som blekner over en periode på 2 sekunder for å fullføre overgangen. CSS3-overgangseiendommen regnes fortsatt som eksperimentell; derfor er prefiksene for -moz, -webkit og -o gitt for henholdsvis Firefox, Safari, Chrome og Opera:

 p { 
 grense: 4px solid # CC33CC; 
 bredde: 400px; 
 polstring: 5px; 
 } 
 .transition_example { 
 uklarhet: 1; 
 -moz-overgang: opacitet 2s lineær; 
 -webkit-overgang: opacitet 2s lineær; 
 -o-overgang: opacitet 2s lineær; 
 overgang: opacitet 2s lineær; 
 } 
 .transition_example: hover { 
 uklarhet: 0; 
 } 

Her er HTML brukt:

 Hold musepekeren over avsnittet nedenfor for å demonstrere overgangseffekten. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum.

Dette eksemplet resulterer i gradvis falming av elementet som vist i figur A med flere progressive skjermbilder av overgangen fra den første innstillingen, deretter etter 1 sekund, og deretter finalen, som vist i Chrome 14.0.8:

Figur A

Et fungerende eksempel på denne overgangen kan sees i Firefox og Chrome fra lenken gitt på slutten av dette blogginnlegget.

Når det gjelder sveveeffekten som er vist ovenfor, når musen beveger seg ut av elementet, vil den reversere effekten, slik at når som helst egenskapen endrer verdi, vil animasjonen ganske enkelt starte igjen med gjeldende posisjon som fra verdien og den nye verdien som mål. To viktige tips å huske om overganger: de er iboende animasjoner; som sådan kan alle skript og stilark skrives som vanlig, og animasjonene vil ganske enkelt forekomme ubetinget når egenskapene endrer verdier. Og de fornedrer grasiøst, i tilfeller der nettlesere ikke støtter overganger, vil elementene helt klart ikke animere, ellers kan alle kode- og stilegenskaper forbli.

Animasjon av eiendomstyper beskriver hvordan hver eiendomstype gjennomgår overgang eller animasjon; listen over tretten inkluderer farge, lengde, prosentandel, heltall, synlighet, skygge, gradient, malingsserver og en stenografi-egenskap. Overgangsegenskapen kan brukes på mange egenskaper fra CSS, og de vises etter egenskapsnavn og -type i CSS Overgangsmodul Nivå 3 Egenskaper fra CSS-tabell.

Forvandle

The -webkit- for Safari og Chrome har lagt til en fin overgang og transformert eiendomseffekt. I det neste eksemplet vil denne effekten gi animasjon med en enkel spinneffekt. Her er bildekildekoden:

 Figur B er gif-bildet: 

Følgende HTML med styling-webkit-prefikser for Chrome og Safari inkluderer en overgang og en transformasjonseffekt med en 3 sekunders enkel inn-og definert 360-graders rotasjon:

Figur C (til venstre) viser rotasjonen som skjer som en grafikk; for referanse, har jeg lagt til en mørk blå prikk for å hjelpe med å følge med i sekvensen på bildet når det roterer 360 ° med urviseren under overgangen og transformerer effekten som vist i Chrome 14.0.8. Det fungerende eksemplet på bilderotasjonseffekten kan demonstreres live fra lenken gitt på slutten av dette blogginnlegget i Safari og Chrome .

Neste er et annet eksempel på den samme transformeringseffekten som brukes på et avsnitt ved bruk av følgende HTML:

Dette avsnittet vil spinne ved første klikk!

Figur D nedenfor viser resultatet i Chrome 14.0.8; avsnittet vil snurre 360 ​​° med urviseren når det er klikket:

Eksemplet over kan demonstreres fra lenken gitt på slutten av dette blogginnlegget i Chrome-nettleseren .

Et ytterligere transformasjonseksempel viser å rotere et element 90 ° med sitt opphav nederst til venstre. Dette eksemplet bruker Firefox-prefikset i følgende CSS3:

 .transform_example { 
 -moz-transform: rotere (90deg); 
 -moz-transform-origin: nederst til venstre; 
 } 

Her er HTML brukt:

Dette avsnittet roteres 90 grader!

 Figur E (til høyre) viser resultatene i Firefox 7.0.1: 

For å se eksemplene ovenfor i HTML, last ned zip-filen fra denne lenken, som inneholder CSS-koden, bilder og HTML. Merk at ikke alle eksempler fungerer i hver nettleser - se i nettleserne som nevnt ovenfor for hvert eksempel.

Fremtidige CSS3-segmenter vil inneholde flere egenskaper som kan implementeres i dag eller i nærmeste fremtid, og jeg vil også gjennomgå moderniseringsprogram som er en flott måte å integrere IE-støtte for CSS3 og HTML5 ved å bruke JavaScript.

Også:

  • CSS3: Hvordan implementere boksen-skyggeegenskapen
  • CSS3: Lag flere skygger skaper lette sider
  • CSS3: Nye muligheter med tekstskygge og 3D-tekst
  • CSS3: Nye egenskaper for tekstoverflyt og tekstinnpakning
  • CSS3: Arbeide med tekstdekorasjonsegenskaper
  • CSS3-egenskaper i prosess: Linjekontinuitet og understrekingsposisjon

© Copyright 2020 | mobilegn.com