當(dāng)我們游覽網(wǎng)頁時(shí)，常常會(huì)遇到一些很有趣的交互效果，如響應(yīng)式導(dǎo)航、動(dòng)畫滾動(dòng)等等。其中一個(gè)比較有趣的效果就是當(dāng)鼠標(biāo)移動(dòng)時(shí)，元素會(huì)跟著鼠標(biāo)反方向移動(dòng)。下面我們就來學(xué)習(xí)一下如何實(shí)現(xiàn)這個(gè)效果。

我們首先在 HTML 中創(chuàng)建一個(gè)包含一個(gè).box的容器。在 CSS 中，我們需要將包含容器設(shè)置為相對定位，這樣.box元素才能使用絕對定位， 相對于包含容器定位 。.box設(shè)置了 100 像素的寬和高，以及綠色的背景顏色。

我們還為 .box 添加了 CSS 過渡效果和 ease-out 動(dòng)畫計(jì)時(shí)函數(shù)。這些將使 .box 在移動(dòng)時(shí)更平滑和漸變，并為移動(dòng)添加一些視覺動(dòng)感。

然后，我們添加了一個(gè)鼠標(biāo)懸停的效果，這個(gè)效果將觸發(fā) .box CSS 的 transform 屬性。該 transform 屬性將 .box 元素在父元素內(nèi)向其相反的方向移動(dòng)。

現(xiàn)在，我們可以嘗試在瀏覽器中預(yù)覽并運(yùn)行代碼了。我們應(yīng)該看到，當(dāng)鼠標(biāo)懸停在容器上方時(shí)，.box 將在相反的方向（向左和向上）移動(dòng)。這個(gè)效果可以很好的應(yīng)用于圖片的放大縮小的效果等。