CSS實現滑鼠經過圖片上圖片等比縮放效果（代碼執行個體）

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

先來看下效果預覽

代碼解讀

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