Wie man einen Übergang Hintergrund mit CSS

Im Gegensatz zu Animationen Übergänge CSS animieren Änderungen zwischen Standard und Hover Staaten von Elementen einer Webseite. Der Hover-Status ähnelt einem Rollover, ein Element einer Seite, die ändert, wenn ein Benutzer "ihre Maus darüber bewegt wird". Übergänge werden angewendet, um CSS Eigenschaften: Hintergrundfarben, Rahmen, Schriftgrade und andere Stile sich – lassen so, dass wenn es einen Unterschied im wie-Eigenschaft festgelegt auf einen Teil der Seite gibt ist wenn ein Benutzer über es, anstatt eine abrupte Änderung bewegt, Sie eine schrittweise sehen animiert ändern.

Anweisungen

1 Öffnen Sie die HTML-Datei für Ihre Webseite in einem Codeeditor oder Notepad. Suchen Sie das Element in einen Übergang in einen Hintergrund, z. B. ein Bild, Div oder Formular-Feld gelten soll:

< Div Id = "Transition_me" >Inhalt hier...< / Div >

Überprüfen Sie, dass das Tag einen ID-Namen hat und zur nehmen Sie Kenntnis, für später. Wenn das Tag keine ID haben, fügen Sie eines wie oben gezeigt.

2 Öffnen Sie die CSS-Datei, die Ihre Webseite als seine Stylesheet verwendet. Wenn Ihre Seite eine CSS-Datei nicht verwendet, können Sie CSS zwischen ein paar "< Stil >" Tags im Head der HTML-Code hinzufügen:

< Head >Ihre Seite Titel hier < Title > < / title >< Typ style = "Text/Css" ><!--CSS-Code geht hier-->< / style >< / head >

In diesem Beispiel stellen die umliegenden "CSS-Code geht hier" Tags, Text einen Kommentar, den der Browser nicht lesen.

3 Schreibe eine Stilregel, die das Element durch seine ID auswählt Stellen Sie eine zweite Stilregel, die das Element seine ID auswählt, nur, wenn der Benutzer darüber bewegt wird:

{Transition_me} }

{Transition_me:hover} }

Die Stile innerhalb der erste Stilregel sind jetzt die Standardstile des Elements. Wenn ein Benutzer die Maus über das Element bewegt, sieht der Browser in der Regel mit ": Hover" verschiedene Stile anwenden.

4 Legen Sie eine Eigenschaft und Wert in die erste Stilregel:

{Transition_me} Hintergrund-Farbe: hellblau;}

Diesem Beispiel wird die Eigenschaft "Background-Color". Anderen Hintergrundeigenschaften gehören-Hintergrundbild, Hintergrund-Größe, Hintergrund-Wiederholung und Background-Position. Sie können eine dieser Eigenschaften überführen.

5 Legen Sie den geänderten Hintergrund in Ihrer zweiten Stilregel:

{Transition_me:hover} Hintergrund-Farbe: dunkelblau;}

So weit, wenn der Benutzer über die "Transition_me"-Div bewegt wird, stellt sich das div-Tag vom Licht blau dunkelblau ohne einen Übergang.

6 Wenden Sie einen Übergang auf eine Eigenschaft innerhalb der erste Stilregel. Die CSS-Eigenschaft ist "Übergang" und es dauert zwei Werte: den Namen der Eigenschaft, die Sie den Übergangseffekt auf verwenden möchten und die Geschwindigkeit des Übergangs. Wenn Sie das Div Hintergrundfarbe Übergang möchten, verwenden Sie diesen Code:

{Transition_me} Hintergrund-Farbe: hellblau;Übergang: Hintergrundfarbe 5 s;}

Übergangsgeschwindigkeit wird in Sekunden angegeben.

7 Duplizieren Sie die Eigenschaft "Übergang" und seine Werte dreimal. Fügen Sie einen Browser-Präfix auf jedes Duplikat, wie dargestellt:

Übergang: Hintergrundfarbe 5 s;-Moz-Übergang: Hintergrundfarbe 5 s;-Webkit-Transition: Hintergrundfarbe 5 s;-o-Übergang: Hintergrundfarbe 5 s;

Zum Zeitpunkt des Verfassens dieses Artikels benötigen Übergänge Browser Präfixe. Obwohl es nicht noch funktionsfähig ist, gewährleistet "Übergang" ohne Präfix, dass Ihr Code in neueren Browsern funktioniert, die dies unterstützen wird. Ab dem Datum der Veröffentlichung die Unterstützung für Übergänge findet sich in Firefox, Chrome, Safari und Opera, obwohl Opera blendet den Hintergrund beim ersten der Seite laden.

Tipps & Warnungen

• Browser, die Übergänge unterstützen unterstützen auch viele ähnliche Eigenschaften, die Verzögerungszeiten und Lockerung zu steuern.
• Internet Explorer 9 unterstützt keine Übergänge. Wenn Benutzer eine Website, die Übergänge im IE 9 hat besuchen, sehen sie die Website, als ob die Übergänge nicht existierte, aber immernoch nicht alle Elemente und Hover-Zustände. Verwenden Sie ein jQuery-Script als Fallback für IE-Browser, wenn diese Benutzer auch die Übergänge sehen müssen.