html:

<div>

? ? ? ? <img src="images/tu1.png" />

</div>

css:(放大）

1:先給圖片最外層的div給定寬度和高度，并寫入 overflow: hidden;? 進(jìn)行圖片放大于原本的寬度就進(jìn)行隱藏

div{

? ? ? ? width: 300px;

? ? ? ? height: 300px;

? ? ? ? border: #000 solid 1px;

? ? ? ? margin: 50px auto;

? ? ? ? overflow: hidden;

}

2：這個(gè)是給圖片的緩慢時(shí)間，在鼠標(biāo)離開的時(shí)候，圖片緩慢的恢復(fù)之前的大小

div img{

? ? ? ? ?cursor: pointer;

? ? ? ? ?transition: all 0.6s;

}

3：給圖片特效，當(dāng)鼠標(biāo)經(jīng)過的時(shí)候，圖片緩慢放大

div img:hover{

? ? ? ? ? ?transform: scale(1.3);

? ? ? ? ? ?transition: all 1s ease 0s;

//下面的是兼容其他瀏覽器的

? ? ? ? ? ?-webkit-transform: scale(1.3);

? ? ? ? ? ?-webkit-transform: all 1s ease 0s;

}

css:縮小

只需要改第三步就可以了

transform: scale(.5);

-webkit-transform: scale(.5);

總結(jié)：

改變transform: scale(.5);的規(guī)律

里面的數(shù)字大于1的就是放大；小于1的就是縮小