So verwenden Sie die CSS-Übergangseigenschaft

Das Übergangsattribut in CSS kann zum Implementieren von Animationen verwendet werden. In diesem Artikel wird Ihnen die Verwendung des Übergangsattributs in CSS vorgestellt.

Werfen wir zunächst einen Blick darauf, was das Übergangsübergangsattribut ist?

Das Übergangsattribut wird verwendet, wenn Änderungen im Zeitverlauf angezeigt werden. Insbesondere können Sie die Hintergrundfarbe schrittweise ändern, indem Sie auf den Cursor klicken. Es gibt jedoch andere Animationsattribute, aber das Übergangsattribut wird verwendet, um relative Änderungen vorzunehmen . Verwenden Sie diese Option, wenn Sie einfache Änderungen vornehmen.

Werfen wir einen genaueren Blick auf die Verwendung des Übergangsattributs

Werfen wir zunächst einen Blick auf die Parameter des Übergangsattributs

-webkit-So verwenden Sie die CSS-Übergangseigenschaft-property: 变化的属性(background属性等);
-webkit-So verwenden Sie die CSS-Übergangseigenschaft-duration: 变化的秒数;
-webkit-So verwenden Sie die CSS-Übergangseigenschaft-timing-function: 变化的方法;

-webkit -So verwenden Sie die CSS-Übergangseigenschaft-timing-function hat die folgenden Werte

default
linear: 匀速
ease-in: 逐渐加速
ease-out: 逐渐减速
ease-in-out: 逐渐加速和逐渐加速
cubic-bezier: 自定义

Sie können auch die folgenden Abkürzungen verwenden

-webkit-So verwenden Sie die CSS-Übergangseigenschaft: 变化的属性 変化的秒数 変化的方法;

Schauen wir uns ein konkretes Beispiel an

Der Code lautet wie folgt

HTML-Code

<div id="demo"></div>
<br>
<div id="demo2"></div>

CSS-Code

#demo {
  height: 100px;
  width: 200px;
  background: rgb(255, 100, 100);
  -webkit-So verwenden Sie die CSS-Übergangseigenschaft-property: background;
  -webkit-So verwenden Sie die CSS-Übergangseigenschaft-duration: 1s;
  -webkit-So verwenden Sie die CSS-Übergangseigenschaft-timing-function: linear;
}
#demo:hover {
  background: rgb(100, 255, 100);
}
#demo2 {
  height: 100px;
  width: 200px;
  background: rgb(255, 100, 100);
  -webkit-So verwenden Sie die CSS-Übergangseigenschaft: background 2s ease-in-out;
}
#demo2:hover {
  background: rgb(100, 100, 255);
}

Laufergebnisse

Führen Sie das Obige aus. Der Code zeigt den folgenden Effekt an

Platzieren Sie den Mauszeiger auf den beiden roten Kästchen, die Farbe ändert sich allmählich

Dieser Artikel endet hier. Weitere Informationen zum Übergangsattribut finden Sie in der Spalte CSS3-Video-Tutorial die chinesische PHP-Website Weiter lernen! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Übergangseigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!