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

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

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

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

當鼠標懸停這個圖片時，我們要讓這個圖片跳動到一個更高的位置。因此我們再次使用transform屬性，將圖片向上移動10px。我們將此樣式應用于:hover偽類，表示當鼠標懸停時應用此樣式。

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