CSS3技術(shù)為我們帶來了一種很有趣的效果——鼠標(biāo)懸停圖片跳動(dòng)。通過CSS代碼的簡(jiǎn)單控制，我們可以使圖片在鼠標(biāo)懸停時(shí)呈現(xiàn)出一種跳動(dòng)的動(dòng)態(tài)效果，增強(qiáng)了頁面的視覺效果。

.hover-img {
transform: translateY(-5px);
transition: transform 0.3s ease-out;
}
.hover-img:hover {
transform: translateY(-15px);
}

以上的代碼顯示出了實(shí)現(xiàn)鼠標(biāo)懸停圖片跳動(dòng)的關(guān)鍵樣式代碼。首先，我們定義了hover-img類，它是我們將要應(yīng)用于鼠標(biāo)懸停圖片上的CSS類，其中包括一個(gè)transform屬性和一個(gè)transition屬性。

transform屬性用于定義任意2D或3D轉(zhuǎn)換，這里利用它將圖片向上移動(dòng)5px。同時(shí)，我們通過transition屬性來讓這個(gè)變換具有動(dòng)畫效果，變換時(shí)長(zhǎng)為0.3s，并使用ease-out來使其變換過程呈現(xiàn)出緩慢變化的效果。

當(dāng)鼠標(biāo)懸停這個(gè)圖片時(shí)，我們要讓這個(gè)圖片跳動(dòng)到一個(gè)更高的位置。因此我們?cè)俅问褂胻ransform屬性，將圖片向上移動(dòng)10px。我們將此樣式應(yīng)用于:hover偽類，表示當(dāng)鼠標(biāo)懸停時(shí)應(yīng)用此樣式。

以上的代碼可以應(yīng)用于任何圖片上，只需要將其定義為一個(gè)類，并在HTML標(biāo)簽中調(diào)用此CSS類即可。