CSS -Übergang mehrere Eigenschaften
Beispiel 1
Starten Sie diesen Code, indem Sie zuerst die HTML -Datei erstellen. Wir öffnen die neue Datei und wählen dann die HTML als Sprache im Visual Studio -Code aus. Wir müssen die “setzen“!In der Datei, die wir hier erstellt haben. Alle grundlegenden Tags der HTML werden in dieser Datei angezeigt. Wir müssen nur den Körper des HTML und den Link der CSS -Datei in den Kopf eingeben.Hier im Körper erstellen wir zuerst eine Überschrift und dann einen Absatz. Nach diesem Absatz erstellen wir hier eine leere DIV. Wir werden diesen HTML -Code auch in unseren nächsten Beispielen verwenden. Jetzt werden wir uns zur weiteren Codierung in Richtung der CSS -Datei bewegen. Wir werden die Übergangseigenschaften auf dieser DIV in der CSS -Datei anwenden.
Zuerst setzen wir die "Div" und seine "Breite" "100px" und "100px" für die "Höhe.”Setzen Sie dann seinen„ Hintergrund “als„ lila."Der" Grenzradius "dieser DIV ist" 50%", so dass es als Kreis erscheinen wird. Nach all diesen Eigenschaften werden wir die Eigenschaft „Übergang“ anwenden und hier „Breite“ und „2s“ einsetzen. Es wendet den Übergangseffekt auf die Breite des Divs an und belebt für 2Sec. Danach verwenden wir das „Schwebe“ mit dem „Div“, also wird es, wenn wir über diese DIV schweben.”
Die Ausgabe dieses Codes zeigt, wie sich die Übergangseigenschaft in der Breite des DIV -Elements ändert. In diesem gegebenen Video können Sie sehen, dass die Breite zunimmt, wenn wir die Maus über diesen Div -Kreis schweben. Wenn die Maus nicht über dieses Element hinausgeht, wird sie in die ursprüngliche Position zurückkehren.
Video Playerhttps: // LinuxHint.COM/WP-Content/Uploads/2022/06/Übergangs-Property-Profil-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.Beispiel # 2
Hier werden wir die Übergangseigenschaft sowohl auf Breite als auch auf Höhe anwenden. Die „Breite“ des DIV ist "120px", und die "Höhe" ist auch die gleiche "120px". Der „Hintergrund“ der DIV befindet sich in „orangefarbener“ Farbe, und sein „Grenzradius“ beträgt in diesem Beispiel 30%. Wir verwenden hier die Eigenschaft „Übergang“, die seine „Breite“ mit einer Zeitdauer von „2S“ und der „Höhe“ mit einer Zeitdauer von „4S“ ändert. Alle diese Übergänge werden angewendet, wenn wir die Maus über dieses DIV -Element auslösen. Wir verwenden auch das „Div.schwebe, in dem wir die „Breite“ und „Höhe“ des DIV -Elements nach dem Schweben festlegen. Wir setzen die "320px" für die "Breite", wenn wir darüber schweben und die
"Höhe" von 320px ".
In diesem gegebenen Video können Sie die Ausgabe dieses Beispiels sehen. Sie sehen.
Video Playerhttps: // LinuxHint.COM/WP-Content/Uploads/2022/06/Übergangs-Property-Profil-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.Beispiel # 3
Hier werden wir alle Übergangseigenschaften separat auf der DIV verwenden. Wir setzen die „Breite“ und „Höhe“ zuerst und beide befinden sich in „130px“. Dann wählen wir "Pink" als "Hintergrund" der Div. Sein „Grenzradius“ beträgt „20%“. Jetzt haben wir die Übergangseigenschaften hier. Zunächst setzen wir die „Übergangs-Property“ und geben den Namen an, für den der Übergang verwendet wird. Hier setzen wir hier die „Breite“ in dieser Eigenschaft. Wir werden die Zeit in separaten Übergangseigenschaften festlegen. Für die Festlegung der Übergangszeit verwenden wir die Eigenschaft „Übergangsdauer“ und geben hier in dieser Eigenschaft die Zeit an. Wir setzen "2S" für diese "Zeit-Duration-Property".”
Danach haben wir die Eigenschaft „Übergangs-Timing-Funktion“. Diese Eigenschaft wird hier verwendet, um die Geschwindigkeit des Übergangs anzugeben. Hier setzen wir es als „linear“, was bedeutet, dass die Übergangseffektgeschwindigkeit von Anfang bis Ende gleich sein wird. Anschließend verwenden wir auch eine Verzögerung auf diesen Übergang, indem wir die Eigenschaft „Übergangsverzögerung“ verwenden. Wir setzen diesen Eigenschaftswert als "1s" fest. Es führt zu einer Verzögerung von „1sec“ für den Übergangseffekt. Wir verwenden alle Übergangseigenschaften hier in diesem Code getrennt. Nach all dem setzen wir die „Breite“ der Div, wenn wir darauf schweben. Nach dem Schwebewechsel ändert es seine Breite auf "350px".
Die Ausgabe wird hier im Video angezeigt. Sie sehen.
Video Playerhttps: // LinuxHint.COM/WP-Content/Uploads/2022/06/Übergangs-Property-Profil-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.Beispiel # 4
In diesem Beispiel verwenden wir die Kurzeigeneigenschaft aller Eigenschaften, die wir in unserem vorherigen Beispiel 3 in diesem Tutorial verwendet haben. Die "Breite" und "Höhe" wird hier als "150px" für jeden festgelegt, und der „Hintergrund“ ist „Pink.Dann verwenden wir die Kurzeigeneigenschaft des Übergangs, in dem wir die „Übergangs-Property“, „Übergangsdauer“, „Übergangs-Timing-Funktion“ und „Übergangsdelay“ in einer „Übergang“ -Reität angeben. Hier gibt die „Breite“ an, dass der Übergang auf die „Breite“ der DIV angewendet wird, und die Dauer des Übergangs beträgt "2S" und im "linearen" Zeitpunkt des Übergangs und einer Verzögerung von 1 Sek. Im Übergang. Alle diese Eigenschaften werden hier in einer Eigenschaft definiert. Es wird also auch als Kurzeigeneignis des Übergangs bezeichnet. Wir setzen auch die „Breite“ dieser Div.
Das Ausgabevideo zeigt, dass bei der Verschiebung der Maus eine Verzögerung von 1 Sekunde erforderlich ist.
Video Playerhttps: // LinuxHint.COM/WP-Content/Uploads/2022/06/Übergangs-Property-Profil-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.Beispiel Nr. 5
Wir erstellen hier mehrere DIV-Elemente mit unterschiedlichen Namen und wenden allen diesen unterschiedlichen Übergangs-Funktionseigenschaften an. Wir erstellen hier in diesem Code fünf verschiedene DIV -Elemente.
Die „Breite“ und „Höhe“ aller Divelemente sind für jeden „100px“. Wir wenden den „Übergang“ auf die „Breite“ in der Zeitdauer von „2S“ an. Wir richten auch den Text aus, der im Div in „Mitte“ geschrieben ist.„Dann werden wir die erste DIV mit Hilfe des Namens des DIV erwähnen und die Eigenschaft„ Übergangs-Timing-Funktion “für diese DIV verwenden und für diese DIV„ linear “festlegen. Es zeigt also die gleiche Geschwindigkeit von Anfang bis Ende. Der „Hintergrund“ von „Div1“ ist „rot.”
Für das zweite Div "Div2" verwenden wir "Leichtigkeit" für die "Übergangs-Timing-Funktion"."Diese" Leichtigkeit "beginnt langsam und dann schnell und endet langsam. Der „Hintergrund“ von „Div2“ ist „grün."Für das dritte Div" Div3 "verwenden wir einen" blauen "Hintergrund und setzen" Leichtigkeit "als Wert der" Übergangs-Timing-Funktion "ein."Das" Easy-In "wird verwendet, um den Übergangseffekt langsam zu beginnen. Die vierte DIV hat einen „gelben“ Hintergrund und „Eventual-Out“ für diese Eigenschaft. Der Übergang "Easy-Out" endet langsam. Die letzte DIV verwendet "Easy-In-Out" in "Übergangs-Timing-Funktion" und startet und wird langsam abgeschlossen. Auch der „Hintergrund“ der letzten Div ist „Kastanienbranchen.”
Im Video haben wir fünf verschiedene Divelemente mit unterschiedlicher „Übergangs-Timing-Funktion“ und Sie können in diesem Video feststellen, dass der Zeitpunkt des Übergangs aller Divelemente unterschiedlich ist.
Video Playerhttps: // LinuxHint.COM/WP-Content/Uploads/2022/06/Übergangs-Property-Profil-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.Abschluss
Wir haben dieses Tutorial zur Erläuterung des Konzepts der Übergangseigenschaften in CSS zur Verfügung gestellt. Wir haben dieses Thema in diesem Tutorial ausführlich behandelt. Wir haben die Eigenschaften des Übergangs, die Übergangsdauer, die Übergangs-Timing-Funktion und die Eigenschaften der Übergangsdelay getrennt und die Kurzeigenschaft dieser Eigenschaften erläutert. Wir haben fünf verschiedene Beispiele übernommen und die Videoausgänge bereitgestellt, damit Sie überprüfen, wie diese Eigenschaft funktioniert. Ich hoffe, Sie verstehen die Mehrfachübergangseigenschaften in CSS und werden es selbst tun.