Wie viele Arten von CSS3-Übergangseigenschaften gibt es?-Front-End-Fragen und Antworten-php.cn

Wie viele Arten von CSS3-Übergangseigenschaften gibt es?

青灯夜游

Freigeben： 2022-03-18 16:58:16

Original

3207 Leute haben es durchsucht

Es gibt 5 Arten von CSS3-Übergangseigenschaften: 1. Übergangseigenschaft; 3. Übergangsdauer; 5. Übergangsverzögerung;

Wie viele Arten von CSS3-Übergangseigenschaften gibt es?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Mit CSS-Übergängen können Sie Immobilienwerte innerhalb eines bestimmten Zeitraums reibungslos ändern.

Es gibt 5 Arten von CSS3-Übergangsattributen:

Attribute	Description	CSS
transition	Abbreviation-Attribut, das zum Festlegen von vier Übergangsattributen in einem Attribut verwendet wird.	3
transition-property	Gibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet.	3
Übergangsdauer	Definieren Sie, wie lange der Übergangseffekt dauert. Der Standardwert ist 0.	3
transition-timing-function	gibt den zeitlichen Verlauf des Übergangseffekts an. Der Standardwert ist „einfach“.	3
transition-delay	Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.	3

CSS3-Übergang ist der Effekt, dass ein Element allmählich von einem Stil zum anderen wechselt.

Um dies zu erreichen, müssen zwei Dinge angegeben werden:

Geben Sie die CSS-Eigenschaft an, zu der der Effekt hinzugefügt werden soll.
Geben Sie die Dauer des Effekts an.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	width:200px;
}
</style>
</head>
<body>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

</body>
</html>

Nach dem Login kopieren

Wie viele Arten von CSS3-Übergangseigenschaften gibt es?

(Teilen von Lernvideos: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWie viele Arten von CSS3-Übergangseigenschaften gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!