本篇文章帶給大家的內容是關於如何使用CSS實現滑鼠經過圖片上圖片縮放（緩慢變化，有過渡效果，縮放的過程是有動畫過渡的）效果，主要用到CSS transform屬性，css3 transition屬性，以下實現效果和具體的實作方法，希望對你有幫助。
先來看下效果預覽
#程式碼解讀
HTML部分的程式碼
定義容器大小，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中文網其他相關文章！
