Video: How to make full width slider using divi theme 2024
Snakk om kraftige nye funksjoner i cascading style sheets (CSS): Ved å sammenpeke: sving pseudo- klasse med overgangseiendommen CSS3, kan du legge til smarte interaktive funksjoner til objektene dine uten bruk av Flash, JavaScript eller jQuery!
Overgangseiendommen har faktisk fire innstillinger, som skal skrives i CSS i følgende rekkefølge: eiendom, varighet, tidsfunksjon, forsinkelse.
Følgende liste beskriver innstillingene:
-
overgangsegenskap: Identifiserer hvilken CSS-egenskap som vil endres, for eksempel bredden eller høyden, som i overgangsegenskap: bredde;.
-
overgangsperiode: Angir verdien i sekunder for overgangen til å fullføre, som i overgangsperiode: 5s;.
-
overgangstidsfunksjon: Angir hastighetskurven for effekten. Verdier kan settes til lineære, enkle, enkle, enkle, enkle, eller kubiske-bezier ( n , n , n >, n ), som i dette eksemplet: overgangstidsfunksjon: lineær;, som tilsvarer kubisk-bezier (0, 0, 1, 1).
-
I følgende kodeeksempel, etter en 2-sekunders forsinkelse, endres en oransje boks jevnt over 5 sekunder fra 100px til 500px bred når en besøkende henger musen over beholderen:
div {width: 100px; høyde: 100px; bakgrunnsfarge: # F90; overgang: bredde 5s lineær 2s; -moz-overgang: bredde 5s lineær 2s; / * Firefox 4 * / -webkit-overgang: bredde 5s lineær 2s; / * Safari og Chrome * / -o-overgang: bredde 5s lineær 2s; / * Opera * /} div: svinger {width: 500px;}