本篇文章帶給大家的內容是關於如何使用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中文網其他相關文章！
