CSS圖片晃動是一種非常有趣的效果，可以讓你的網站更加生動有趣。今天我們來逐步學習如何實現這種效果。

.shake-image {
position: relative;
animation: shake 0.5s;
}
@keyframes shake {
0% {
transform: translate(0);
}
20% {
transform: translate(-10px, 10px);
}
40% {
transform: translate(10px, -10px);
}
60% {
transform: translate(-10px, 10px);
}
80% {
transform: translate(10px, -10px);
}
100% {
transform: translate(0);
}
}

在上面的代碼中，我們創建了一個名為“shake-image”的CSS類，這個類用來設置圖片的位置，并且使用“animation”屬性來指定圖片要執行的動畫。接著我們定義了一個名為“shake”的關鍵幀，該關鍵幀包含了圖片要執行的具體動畫過程。在這個過程中，將圖片沿著x和y軸來回移動，使圖片呈現出晃動效果。

最后，我們只需要在HTML代碼中使用這個CSS類，就可以讓圖片實現晃動效果了。