在網(wǎng)頁設(shè)計中，經(jīng)常會使用鼠標經(jīng)過圖片時出現(xiàn)效果，其中較為常見的就是圖片的平移。下面我們來學習使用CSS實現(xiàn)鼠標經(jīng)過圖片平移的效果。

HTML代碼：
<div class="box">
<img src="image.jpg" alt="圖片">
</div>
CSS代碼：
.box {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.box img {
position: absolute;
transition: all 0.3s ease-in-out;
}
.box:hover img {
transform: translate(20px, 20px);
}

首先，在HTML中我們需要嵌套一個div標簽，設(shè)置其寬高以及overflow屬性為hidden，從而創(chuàng)建出一個盒子。在盒子內(nèi)部，我們插入一張圖片作為鼠標經(jīng)過的對象。

接著，在CSS中我們?yōu)楹凶釉O(shè)置了position:relative屬性，并為圖片設(shè)置了position:absolute屬性，這樣我們才能對圖片進行位移操作。同時，我們設(shè)置了鼠標經(jīng)過時的動畫效果，即transition屬性為all 0.3s ease-in-out。

最后一步是設(shè)置鼠標經(jīng)過時的效果，即使用:hover偽類對圖片進行屬性變化。這里我們使用transform屬性來對圖片進行平移操作，其中translate(20px, 20px)表示圖片向右下方平移20px。

至此，我們已經(jīng)成功實現(xiàn)了鼠標經(jīng)過圖片平移的效果。你可以自行嘗試更改CSS中的屬性值，來實現(xiàn)不同的動畫效果。