Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Einführung in das neue Übergangsattribut in CSS3 (mit Beispielen)

不言
Freigeben: 2018-08-28 11:17:33
Original
1692 Leute haben es durchsucht

Der Inhalt dieses Artikels ist eine Einführung in das neue Übergangsattribut in CSS3 (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist.

In CSS3 wurde ein neuer Modulübergang hinzugefügt, der durch einige einfache CSS-Ereignisse Änderungen im Erscheinungsbild von Elementen auslösen kann, wodurch der Effekt empfindlicher wird.
Es handelt sich um ein zusammengesetztes Attribut, das hauptsächlich die folgenden Unterattribute umfasst.

Übergangseigenschaft: Geben Sie die CSS-Eigenschaft des Übergangs oder der dynamischen Simulation an.
Übergangsdauer: Geben Sie die Zeit an, die zum Abschließen des Übergangs erforderlich ist.
Übergangs-Timing-Funktion: Geben Sie die Übergangsfunktion an
Übergangsverzögerung: Geben Sie die Verzögerungszeit für den Beginn des Erscheinungsbilds an.

Zum Beispiel:

transition: background-color .5s ease .1s;
Nach dem Login kopieren

Besonderer Hinweis: Wenn das Attribut „transition-property“ auf „all“ festgelegt ist, stellt es die Attribute von dar alle Mittelpunktwerte.

Beispiel:

width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;
Nach dem Login kopieren

Sie können auch einzelne Eigenschaften festlegen.

Verwandte Empfehlungen:

CSS3-Übergangsattribut_html/css_WEB-ITnose

Detaillierte Erklärung und Beispielfreigabe des Übergangsattributs in CSS3 _CSS/HTML

Das obige ist der detaillierte Inhalt vonEinführung in das neue Übergangsattribut in CSS3 (mit Beispielen). 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