如果我們想要讓網(wǎng)頁的圖片在鼠標劃過時有一些小動畫效果，可以使用css的“hover”偽類并搭配一些簡單的代碼來實現(xiàn)。

img:hover {
animation: shake 0.5s;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

這段代碼的意思是，當(dāng)鼠標指針懸停在圖片上時，圖片會執(zhí)行名為“shake”的動畫，時間為0.5秒。這個“shake”動畫是通過“@keyframes”來創(chuàng)建的，其中定義了一系列的位置及相應(yīng)的時間占比，最終完成了一個左右晃動的效果。

我們可以根據(jù)自己的需要來修改動畫的時間、幅度、頻率等參數(shù)來達到不同的效果。只需要把上面的代碼復(fù)制到自己的css文件中即可。