CSS3懸停圖片放大

img:hover{
transform:scale(1.2);
transition:transform 0.5s ease-in-out;
}

CSS3給我們帶來了很多有趣的效果，其中包括了懸停圖片放大效果。這種效果不需要使用JavaScript，只需要使用CSS就可以實現(xiàn)！下面，我們嘗試使用CSS3實現(xiàn)一個懸停圖片放大的效果。

首先，我們需要用CSS選擇器選中懸停在上面的圖片，并且用“transform”屬性來控制圖片的大小。我們可以選擇讓圖片從原來的大小放大到1.2倍：

img:hover{
transform:scale(1.2);
}

當(dāng)然，我們需要添加一個過渡效果才能讓圖片放大的過程更加平滑。我們可以使用“transition”屬性來控制這個過渡效果。在這個例子中，我們設(shè)置過渡效果持續(xù)時間為0.5秒，速度為“ease-in-out”：

img:hover{
transform:scale(1.2);
transition:transform 0.5s ease-in-out;
}

現(xiàn)在，我們已經(jīng)成功地實現(xiàn)了懸停圖片放大的效果。這種效果可以讓網(wǎng)頁更加生動有趣，同時也提高了用戶的體驗。