CSS implémente l'effet de mise à l'échelle de l'image lorsque la souris passe dessus (exemple de code)

Le contenu de cet article explique comment utiliser CSS pour obtenir l'effet de zoom d'image (changements lents, avec des effets de transition, et le processus de zoom a des transitions animées) lorsque la souris passe sur l'image. utilise attribut de transformation CSS, attribut de transition CSS3, les effets d'implémentation suivants et les méthodes d'implémentation spécifiques, j'espère que cela vous sera utile.

Jetons d'abord un coup d'œil à l'aperçu de l'effet

Interprétation du code

Partie HTML Le code

<div class="content">
	<ul>
	   <li><img  class="amplify" src="img/1.jpg" title="放大"/ alt="CSS implémente l'effet de mise à l'échelle de l'image lorsque la souris passe dessus (exemple de code)" ></li>
	   <li><img  class="narrow" src="img/1.jpg" title="缩小"/ alt="CSS implémente l'effet de mise à l'échelle de l'image lorsque la souris passe dessus (exemple de code)" ></li>
	</ul>
</div>

définit la taille du conteneur, overflow : caché ; lorsque la taille du conteneur enfant dépasse le conteneur parent, la partie débordement peut être masquée

* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			ul li{
				list-style: none;
			}
			.content{
				width: 310px;
				height: 420px;
				padding: 5px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			/*定义容器的大小*/
			.content ul li{
				display: block;
				width: 300px;
				margin: 0 auto;
				margin: 5px;
				overflow: hidden;/*隐藏溢出*/
				border: 1px solid #000;	
			}

définit la mise à l'échelle originale de la transformation d'image : scale(1),.

Effet de transition lorsque l'image est zoomée : transition : tous les 1 facilitent les 0 ; tous les styles facilitent (ralentissent progressivement) les changements en 1 seconde. En plus de la facilité (valeur par défaut), les attributs de transition incluent : linéaire (. Vitesse constante), easy-in : (accélérer), easy-out : (décélérer), easy-in-out : (accélérer puis décélérer)

 .content ul li img{
				display: block;
				border: 0;
				width: 100%;
				transform: scale(1);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1);
				-webkit-transform: all 1s ease 0s;
			}

Lorsque la souris se déplace vers l'image, le effet de zoom de l'image : Si la valeur dans scale() est supérieure à 1, elle sera agrandie ; si la valeur dans scale() est inférieure à 1, elle sera réduite.

/*图片放大*/
			.content ul li:hover .amplify{
				transform: scale(1.3);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1.3);
				-webkit-transform: all 1s ease 0s;
			}
			/*图片缩小*/
			.content ul li:hover .narrow{
				transform: scale(0.8);
				transition: all 1s ease 0s;
				-webkit-transform: scale(0.8);
				-webkit-transform: all 1s ease 0s;
			}

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!