本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片上圖片縮放(緩慢變化，有過渡效果，縮放的過程是有動(dòng)畫過渡的)效果，主要用到CSS transform屬性，css3 transition屬性，以下實(shí)現(xiàn)效果和具體的實(shí)現(xiàn)方法，希望對你有所幫助。

先來看下效果預(yù)覽

代碼解讀

HTML部分的代碼

定義容器大小，overflow: hidden;可以在子容器的大小超過父容器的時(shí)候，隱藏溢出的部分* {

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)，。

圖片縮放時(shí)的過度效果： transition: all 1s ease 0s;全部樣式在1秒內(nèi)緩動(dòng)(逐漸變慢)的變化，除了ease(默認(rèn)值)之外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;

}

鼠標(biāo)移動(dòng)到圖片時(shí)，圖片的縮放效果：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;

}

總結(jié)

以上是生活随笔為你收集整理的css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。