Qu'est-ce que la transition CSS ? Une brève introduction aux éléments de transition en CSS-tutoriel CSS-php.cn

Qu'est-ce que la transition CSS ? Une brève introduction aux éléments de transition en CSS

不言

Libérer： 2018-08-10 10:28:49

original

3212 Les gens l'ont consulté

Le contenu de cet article porte sur qu'est-ce que la transition CSS ? Une brève introduction aux éléments de transition en CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

transition css : l'effet des éléments changeant progressivement d'un style à l'autre.
Conditions requises pour la transition :

1. L'élément en cours de transition doit avoir un style CSS.

2. Il doit y avoir un temps de transition.

Voici les attributs de l'élément de transition :

transition : attribut abrégé, utilisé pour définir quatre attributs de transition dans un seul attribut.

transition-property : Spécifie le nom de la propriété CSS qui applique la transition.

transition-duration : Le temps nécessaire à la transition.

fonction de synchronisation de transition : la courbe temporelle de l'élément de transition. Les valeurs d'attribut sont linéaires (un processus de vitesse uniforme), facilité (un processus de ralentissement progressif), facilité d'entrée. (un processus d'accélération), atténuation (le processus de décélération), cube-bézier (0,0,0,0) Courbe de Bézier

transition-delay : Spécifiez l'heure de début d'une transition (qui c'est-à-dire combien de temps il faudra pour démarrer l'exécution), la valeur par défaut est 0

Nous utilisons généralement l'effet de transition après le glissement ou le clic de la souris. Ici, je prends le survol de la souris comme exemple :

<.>1. La largeur passe à 120 % de l'original après le passage de la souris

2. Ajoutez une ombre lorsque la souris glisse dessus

3. Réalisez la traduction, la rotation, la mise à l'échelle et la distorsion. et d'autres effets lorsque la souris glisse dessus.

transformation (conversion 2D)

Les valeurs d'attribut incluent : translation (traduction), rotation (rotation), mise à l'échelle (zoom), inclinaison (distorsion)

partie html

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

Copier après la connexion

partie CSS :

#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); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
	
		}

Copier après la connexion

Recommandations associées :

Explication détaillée de l'attribut d'animation de CSS3 (avec code)

Comment créer un effet clignotant d'affichage de texte uniquement en utilisant du code CSS ? (Exemple de code)

Comment utiliser CSS et D3 pour obtenir une animation à effet de swing cycloïde

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!