Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie das Übergangsattribut
So verwenden Sie das Übergangsattribut
- 青灯夜游Original
- 2019-01-30 14:44:497267Durchsuche
Das Übergangsattribut in CSS3 ist ein Kurzattribut, das zum Erzielen von Übergangseffekten verwendet wird. Es legt den CSS-Eigenschaftsnamen, die Abschlusszeit, die Geschwindigkeitskurve und die Startzeit des einzustellenden Übergangseffekts fest.
CSS3-Übergangsattribut
Funktion: Legen Sie das Übergangsattribut des fest Element
Beschreibung: Zusammengesetztes Attribut. Ruft den Übergang ab oder legt ihn fest, wenn das Objekt transformiert wird. Wird zum Festlegen von vier Übergangseigenschaften verwendet: Übergangseigenschaft, Übergangsdauer, Übergangszeitfunktion, Übergangsverzögerung.
Syntax:
transition: property duration timing-function delay;
transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt.
Übergangsdauer: Gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.
transition-timing-function: Gibt den Geschwindigkeitsverlauf des Geschwindigkeitseffekts an.
Übergangsverzögerung: Definiert, wann der Übergangseffekt beginnt.
Verwendungsbeispiel des CSS3-Übergangsattributs
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>Rendering:
Above That's Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein kann. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Übergangsattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!