本篇文章給大家帶來的內容是關于如何使用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改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。