CSS中鼠標(biāo)滑過放大是一種很常見的效果，會(huì)讓頁面看上去更加生動(dòng)有趣。接下來我們就來學(xué)習(xí)一下如何實(shí)現(xiàn)這個(gè)效果。
.Img{
width:200px; /*圖片的原始大小*/
height:200px;
margin:10px;
float:left;
overflow:hidden; /*隱藏超出圖片大小的部分*/
position:relative; /*設(shè)為相對(duì)定位，以后用到絕對(duì)定位*/
}
.Img img{
display:block; /*img標(biāo)簽設(shè)為塊狀元素*/
position:absolute; /*絕對(duì)定位*/
top:0;
left:0;
transition:all 0.5s; /*過渡屬性*/
-webkit-transition:all 0.5s; /*Safari、Chrome寫法*/
}
.Img:hover img{
transform:scale(1.2); /*鼠標(biāo)懸浮時(shí)圖片放大1.2倍*/
-webkit-transform:scale(1.2); /*Safari、Chrome寫法*/
}以上代碼中，我們首先定義一個(gè)
標(biāo)簽，用來包裹圖片。在
標(biāo)簽中再嵌套一個(gè)![]()
標(biāo)簽，用來插入圖片。
我們給
標(biāo)簽設(shè)置一個(gè)固定大小，然后將![]()
標(biāo)簽設(shè)為絕對(duì)定位，并給其設(shè)置一個(gè)初始位置，使其與父級(jí)標(biāo)簽
重疊。
鼠標(biāo)懸浮在
標(biāo)簽上時(shí)，就會(huì)觸發(fā)CSS中的:hover偽類，我們?cè)?hover后面加上![]()
選擇器，并給其添加transform屬性，將其放大1.2倍。同時(shí)，我們也可以添加一個(gè)transition屬性，使其在變換過程中有過渡效果。
這樣，當(dāng)鼠標(biāo)滑過圖片時(shí)，就會(huì)自然地出現(xiàn)放大的效果了。