CSS如何實現(xiàn)鼠標經過圖片上圖片等比縮放效果

這篇文章主要介紹了CSS如何實現(xiàn)鼠標經過圖片上圖片等比縮放效果，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

先來看下效果預覽

代碼解讀

HTML部分的代碼

<div class="content">
	<ul>
	   <li><img class="amplify" src="img/1.jpg" title="放大"/></li>
	   <li><img class="narrow" src="img/1.jpg" title="縮小"/></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如何實現(xiàn)鼠標經過圖片上圖片等比縮放效果內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!