CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예).

이 문서의 내용은 마우스가 이미지 위로 지나갈 때 CSS를 사용하여 이미지 크기 조정 효과(느린 변경, 전환 효과 포함, 크기 조정 프로세스에 애니메이션 전환 포함)를 얻는 방법에 관한 것입니다. 주로 사용되는 , css3 전환 속성, 다음과 같은 구현 효과와 구체적인 구현 방법이 여러분에게 도움이 되길 바랍니다.

먼저 효과 미리보기를 살펴보겠습니다

코드 해석

코드의 HTML 부분

<div class="content">
	<ul>
	   <li><img  class="amplify" src="img/1.jpg" title="放大"/ alt="CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예)." ></li>
	   <li><img  class="narrow" src="img/1.jpg" title="缩小"/ alt="CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예)." ></li>
	</ul>
</div>

컨테이너 크기 정의, 오버플로: 숨김; 하위 컨테이너가 상위 컨테이너를 초과합니다.

* {
				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;	
			}

부분은 이미지 변환의 원래 크기 조정을 정의합니다: scale(1),.

사진을 확대할 때의 전환 효과: 전환: 모두 1초 완화(점진적으로 느려짐)는 1초 이내에 변경됩니다. 완화(기본값) 외에도 전환 속성에는 선형(균일한 속도)이 포함됩니다. ,이지 인:(가속),이지 아웃:(감속),이지 인-아웃:(가속했다가 감속)

 .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;
			}

마우스가 그림으로 이동하면 그림의 확대 효과: in의 값 scale()이 1보다 크면 확대되고, scale()의 값이 1보다 작으면 축소됩니다.

/*图片放大*/
			.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;
			}

위 내용은 CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!