Video: How to use gradient background in html and css 2024
Tala om kraftfulla nya funktioner i CSS-format: Genom att para ihop: svängpseudo- klass med övergångsegenskapen CSS3, kan du lägga till smarta interaktiva funktioner till dina objekt utan att använda Flash, JavaScript eller jQuery!
Övergångsegenskapen har faktiskt fyra inställningar, som ska skrivas i CSS i följande ordning: egendom, varaktighet, tidsfunktion, fördröjning.
Följande lista beskriver inställningarna:
-
Övergångsegenskap: Identifierar vilken CSS-egenskap som ska ändras, t.ex. bredd eller höjd, som i övergångsegenskap: bredd;.
-
övergångsperiod: Ställer in värdet i sekunder för övergången att slutföra, som i övergångsperiod: 5s;.
-
övergångstidsfunktion: Anger hastighetskurvan för effekten. Värdena kan ställas in linjärt, lätthet, lätthet, lätthet, lätthet eller kubisk-bezier ( n , n , n >, n ), som i detta exempel: övergångstidsfunktion: linjär;, vilket motsvarar kubisk-bezier (0, 0, 1, 1).
-
I följande kodexempel, efter en 2-sekunders fördröjning, ändras en orange låda jämnt över 5 sekunder från 100px till 500px bred när en besökare hänger musen över behållaren:
div {width: 100px; höjd: 100px; bakgrundsfärg: # F90; övergång: bredd 5s linjär 2s; -moz-övergång: bredd 5s linjär 2s; / * Firefox 4 * / -webkit-övergång: bredd 5s linjär 2s; / * Safari & Chrome * / -o-övergång: bredd 5s linjär 2s; / * Opera * /} div: svävar {width: 500px;}