Heim > Artikel > Web-Frontend > Was ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSS

Was ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSS

不言Original: 2018-08-10 10:28:493202Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, was ein CSS-Übergang ist. Eine kurze Einführung in Übergangselemente in CSS hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

CSS-Übergang: Die Wirkung von Elementen, die sich allmählich von einem Stil zum anderen ändern.
Erforderliche Bedingungen für den Übergang:

1. Das zu übertragende Element muss einen CSS-Stil haben.

2. Es muss Übergangszeit geben.

Das Folgende sind die Attribute des Übergangselements:

Übergang: Kurzschriftattribut, das zum Festlegen von vier Übergangsattributen in einem Attribut verwendet wird.

transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet.

Übergangsdauer: die für den Übergang benötigte Zeit.

Übergangszeitfunktion: Die Zeitkurve des Übergangselements. Die Attributwerte sind linear (ein Prozess mit gleichmäßiger Geschwindigkeit), Leichtigkeit (ein Prozess mit allmählicher Verlangsamung) und Leichtigkeit (ein Prozess der Beschleunigung), Ease-Out (der Prozess der Verzögerung), Kubik-Bezier (0,0,0,0) Bezier-Kurve

Übergangsverzögerung: Geben Sie die Startzeit eines Übergangs an (das ist, wie lange es dauern wird, bis die Ausführung beginnt), der Standardwert ist 0

Wir verwenden normalerweise den Übergangseffekt, nachdem die Maus darüber gleitet oder klickt:

1. Die Breite ändert sich auf 120 % des Originals, nachdem die Maus darüber gleitet

2. Fügen Sie Schatten hinzu, wenn die Maus darüber gleitet

3 und andere Effekte, wenn die Maus darüber gleitet.

Transformation (2D-Konvertierung)

Zu den Attributwerten gehören: Verschieben (Übersetzung), Drehen (Rotation), Skalieren (Zoom), Skew (Verzerrung)

HTML-Teil

<body>
	<div id="box">
			
	</div>
</body>

CSS-Teil:

#box{
			height: 200px;
			width: 200px;
			border:1px solid #000;
			/*1.鼠标滑过宽度变为原来的120%*/
			transition-property: width; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			/*2.鼠标滑过加上阴影*/
			transition-property: box-shadow; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			
			/*以上写法比较麻烦所以可以简写成：*/
			transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
			
			-ms-transition: all 1s linear 0s;/*兼容IE10+*/
			-moz-transform: all 1s linear 0s;/*兼容 Firefox */
			-o-transition: all 1s linear 0s;/* 兼容Opera */
			-webkit-transform:  all 1s linear 0s;/* 兼容Safari and Chrome */;
			
		}
		
		/*transform(2D转换)
		属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/
		
		#box:hover{
			width: 120%;
			box-shadow: 0px 0px 5px orange;
			
	       /*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/
			/*1.平移*/
			transform: translate(50px,50px);  /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/
			-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;
			-ms-transform: translate(50px,50px);/*兼容IE10+*/
			-moz-transform: translate(50px,50px);/*兼容 Firefox */
			-o-transform: translate(50px,50px);/* 兼容Opera */
			/*只让x轴平移*/
			transform: translateX(50px); 
			
			-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateX(50px);/*兼容IE10+*/
			-moz-transform: translateX(50px);/*兼容 Firefox */
			-o-transform:  translateX(50px);/* 兼容Opera */
			/*只让y轴平移*/
			transform: translateY(50px);
			
			-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateY(50px);/*兼容IE10+*/
			-moz-transform: translateY(50px);/*兼容 Firefox */
			-o-transform:  translateY(50px);/* 兼容Opera */
			
			/*2.旋转*//*兼容性同 平移*/
			transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/
			 /*只让x轴旋转*/
			 transform:rotateX(45deg);
			 /*只让y轴旋转,相当一3D旋转*/
			 transform:rotateY(45deg);
			 
			 
			/*3.缩放*//*兼容性同 平移*/
			transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/
			
			/*4.扭曲*//*兼容性同 平移*/
			
			transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
	
		}

Verwandte Empfehlungen:

Ausführliche Erklärung der Animationseigenschaften von CSS3 (mit Code)

Wie kann man mit reinem CSS-Code einen blinkenden Textanzeigeeffekt erzielen? (Codebeispiel)

So verwenden Sie CSS und D3, um eine Zykloiden-Swing-Effekt-Animation zu erzielen

Das obige ist der detaillierte Inhalt vonWas ist CSS-Übergang? Eine kurze Einführung in Übergangselemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)Nächster Artikel：Detaillierte Erläuterung der CSS3-Animationseigenschaften (mit Code)

In Verbindung stehende Artikel

Mehr sehen