CSS是前端開發(fā)中不可或缺的一種技術(shù)，它可以實(shí)現(xiàn)網(wǎng)頁的樣式美化和交互效果。其中，鼠標(biāo)劃過圖片變大是一種常見的交互效果。下面就來學(xué)習(xí)一下如何通過CSS實(shí)現(xiàn)這種效果。

/*HTML結(jié)構(gòu)*/
<div class="container">
<img src="image.png">
</div>
/*CSS樣式*/
.container {
position: relative;
}
.container img {
width: 200px;
height: auto;
transition: all 0.3s ease;
}
.container img:hover {
transform: scale(1.1);
}

首先，在HTML中定義一個(gè)容器，然后在容器內(nèi)添加一張圖片。在CSS中，為容器添加相對(duì)定位，這樣就可以讓圖片的絕對(duì)定位和變形效果參照容器。然后，給圖片添加初始狀態(tài)的寬度和高度，并設(shè)置過渡效果。最后，在:hover偽類中，添加放大效果，這里使用transform的scale屬性來實(shí)現(xiàn)。需要注意的是，為了避免圖片過度變形，建議設(shè)置scale值小于2。

通過以上簡(jiǎn)單的CSS代碼，就可以實(shí)現(xiàn)鼠標(biāo)劃過圖片變大的效果，讓網(wǎng)頁看起來更加動(dòng)態(tài)生動(dòng)。