在CSS中，我們可以通過使用@keyframes規(guī)則來創(chuàng)建動(dòng)畫，為了制作一個(gè)圖片晃動(dòng)的動(dòng)畫，我們可以定義一個(gè)從0到100的動(dòng)畫過程，然后在每個(gè)關(guān)鍵幀上改變圖片的位置，以下是一個(gè)簡(jiǎn)單的例子：

@keyframes shake {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-10px, 0); }
    20% { transform: translate(10px, 0); }
    30% { transform: translate(-10px, 0); }
    40% { transform: translate(10px, 0); }
    50% { transform: translate(-10px, 0); }
    60% { transform: translate(10px, 0); }
    70% { transform: translate(-10px, 0); }
    80% { transform: translate(10px, 0); }
    90% { transform: translate(-10px, 0); }
    100% { transform: translate(10px, 0); }
}
.image-shake:hover {
    animation: shake 0.5s;
}

在這個(gè)例子中，我們定義了一個(gè)名為shake的動(dòng)畫，它會(huì)在每個(gè)關(guān)鍵幀上稍微改變圖片的位置，我們將這個(gè)動(dòng)畫應(yīng)用到.image-shake類上，并在鼠標(biāo)懸停時(shí)觸發(fā)它，這樣，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，圖片就會(huì)開始晃動(dòng)。