Detaillierte Erklärung des CSS3-Übergangs-Escape Tornado

0. Umgebungsvorbereitung

　(1)Um diese Attribute zu verwenden, müssen Sie das Präfix des Browserherstellers hinzufügen. Das von mir verwendete Chrome49 benötigt das Präfix

nicht mehr

　-o- Opera

　-webkit- Safari, Chrome

　-moz- Firefox

　-ms- IE

　(2) CSS

p

　{

　height:15px;/*Attribute ähnlich der Höhe, der Wert muss klar angegeben werden*/

　

　}

p:hover/*initial p:hover*/

　{

　

Höhe:100px;

　}

(3) HTML-Dateikörperteil

　

1. Schnelle Verwendung

Fügen Sie die folgenden Attribute zum anfänglichen p:hover hinzu

Übergang: Hintergrund 2s linear 1s, Höhe 1s linear 1s;

2. Ausführliche Erklärung

　(1)Geben Sie die Attribute separat an und erläutern Sie sie ausführlich

Fügen Sie die folgenden Attribute zum anfänglichen p:hover hinzu

übergangseigenschaft:höhe,hintergrundfarbe;

Übergangsdauer:1s,2s;

Transition-Timing-Function:linear;

Übergangsverzögerung:1000ms,1s;

Transition-property gibt die Eigenschaft an, die geändert werden muss

Es wird nicht empfohlen, alles aufzuschreiben, da die Regeln schwer zu verstehen sind

Die Übergangsdauer der Höhe dauert von der Ausführung bis zum Ende 1 Sekunde, und die Hintergrundfarbe benötigt von der Ausführung bis zum Ende 2 Sekunden. Nach dem Ende der Höhenänderung bleibt noch 1 Sekunde übrig, nachdem die Änderung der Hintergrundfarbe endet.

Wenn Sie nur einen Wert schreiben, wenden alle Attribute diesen Wert an. Stellen Sie außerdem sicher, dass die Anzahl der Übergangsdauerwerte der Anzahl der Übergangsdauerwerte entspricht

transition-timing-function:linear; Die Änderungsregeln finden Sie hier

Wenn nur ein Wert geschrieben wird, wird dieser Wert auf alle Eigenschaften angewendet. Stellen Sie außerdem sicher, dass die Anzahl der Übergangszeitfunktionswerte der Anzahl der Übergangseigenschaftswerte entspricht

Übergangsverzögerung: 1000 ms, 1 s; Höhe beginnt sich nach 1 s zu ändern, hier beginnen sich Hintergrundfarbe und Höhe gleichzeitig zu ändern

Wenn nur ein Wert geschrieben wird, wird dieser Wert auf alle Eigenschaften angewendet. Stellen Sie außerdem sicher, dass die Anzahl der Übergangsverzögerungswerte der Anzahl der Übergangseigenschaftswerte entspricht

Diese Attribute können nur einmal vorkommen, sonst überschreiben die späteren die vorherigen

(2) Umfassende Nutzung

Fügen Sie die folgenden Attribute zum anfänglichen p:hover hinzu

Übergang: Hintergrund 2s linear 1s, Höhe 1s linear 1s;

<> Optionale Parameter, bitte vollständig angeben

Diese Attribute können nur einmal vorkommen, sonst überschreiben die späteren die vorherigen

*Übergang und andere separat geschriebene Übergänge werden ebenfalls abgedeckt, und letzterer deckt den vorherigen

ab