CSS是前端工程師必備技能之一，可以幫助我們制作出更好看、交互性更強(qiáng)的網(wǎng)頁(yè)網(wǎng)站。其中，使用CSS可以讓鼠標(biāo)經(jīng)過(guò)特定的元素時(shí)，圖片自動(dòng)變換，增加網(wǎng)頁(yè)的用戶體驗(yàn)。下面我們來(lái)介紹如何實(shí)現(xiàn)這種效果。

/* 首先定義兩個(gè)圖片 */
img {
width: 300px;
height: 200px;
}
img.default {
background-image: url("default.jpg");
}
img.hover {
background-image: url("hover.jpg");
}

我們使用兩張圖片，一張是默認(rèn)的圖片，另一張是鼠標(biāo)經(jīng)過(guò)時(shí)要顯示的圖片。為了方便定義樣式，我們給兩個(gè)圖片設(shè)定了公共的寬度和高度。

/* 為元素添加鼠標(biāo)進(jìn)入和離開(kāi)時(shí)的變換效果 */
img:hover {
cursor: pointer;
background-position: center center;
background-size: cover;
transition: all 0.2s ease-in-out;
}
/* 設(shè)置默認(rèn)狀態(tài) */
img.default {
cursor: pointer;
background-position: center center;
background-size: cover;
}

接下來(lái)我們?yōu)閳D片定義鼠標(biāo)進(jìn)入和離開(kāi)時(shí)的變換效果。當(dāng)鼠標(biāo)進(jìn)入時(shí)，我們?cè)O(shè)置了鼠標(biāo)指針的樣式為手型，然后采用CSS3的transition屬性，實(shí)現(xiàn)圖片漸變變換的效果。我們還使用了background-position和background-size屬性，讓圖片在變換時(shí)保持居中和完整顯示。

最后，我們?yōu)槟J(rèn)狀態(tài)的圖片添加了相同的樣式，這樣鼠標(biāo)離開(kāi)圖片時(shí)，它們能夠平滑過(guò)渡，還原到默認(rèn)的狀態(tài)。

現(xiàn)在你可以通過(guò)以上代碼，在你的網(wǎng)頁(yè)上實(shí)現(xiàn)圖片鼠標(biāo)經(jīng)過(guò)變換的效果啦！