CSS實作滑鼠經過圖片上圖片等比縮放效果（程式碼實例）

本篇文章帶給大家的內容是關於如何使用CSS實現滑鼠經過圖片上圖片縮放（緩慢變化，有過渡效果，縮放的過程是有動畫過渡的）效果，主要用到CSS transform屬性，css3 transition屬性，以下實現效果和具體的實作方法，希望對你有幫助。

先來看下效果預覽

#程式碼解讀

HTML部分的程式碼

<div class="content">
	<ul>
	   <li><img  class="amplify lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    title="放大"/ alt="CSS實作滑鼠經過圖片上圖片等比縮放效果（程式碼實例）" ></li>
	   <li><img  class="narrow lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    title="缩小"/ alt="CSS實作滑鼠經過圖片上圖片等比縮放效果（程式碼實例）" ></li>
	</ul>
</div>

定義容器大小，overflow: hidden;可以在子容器的大小超過父容器的時候，隱藏溢出的部分

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

定義圖片的原始縮放比例transform: scale(1 )，。

圖片縮放時的過度效果： transition: all 1s ease 0s;全部樣式在1秒內緩動（逐漸變慢）的變化，除了ease（預設值）之外transition屬性還有： linear （勻速），ease-in：(加速)，ease-out：（減速），ease-in-out：（加速然後減速）

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

滑鼠移動到圖片時，圖片的縮放效果：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中文網其他相關文章！