Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie die CSS-Übergangseigenschaft

不言
Freigeben: 2018-12-06 17:53:59
Original
5119 Leute haben es durchsucht

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

So verwenden Sie die CSS-Übergangseigenschaft

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: 变化的方法;
Nach dem Login kopieren

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

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

Sie können auch die folgenden Abkürzungen verwenden

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

Schauen wir uns ein konkretes Beispiel an

Der Code lautet wie folgt

HTML-Code

<div id="demo"></div>
<br>
<div id="demo2"></div>
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

Laufergebnisse

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

So verwenden Sie die CSS-Übergangseigenschaft

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

So verwenden Sie die CSS-Übergangseigenschaft

So verwenden Sie die CSS-Übergangseigenschaft

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage