CSS3的強大功能不僅僅局限于樣式美化，還可以實現動態效果。在這篇文章中，我們將介紹如何使用CSS3來實現圖片上下晃動的動態效果。

/* CSS代碼 */
img {
position: relative;
animation: shake 0.5s ease-in-out infinite alternate;
}
@keyframes shake {
0% {
top: 0;
transform: rotate(0deg);
}
100% {
top: 10px;
transform: rotate(-5deg);
}
}

首先，我們需要使用CSS的position屬性將圖片設置為相對定位（relative）。這是因為我們將在動畫中使用top屬性，以改變圖片距離頂部的距離。

然后，我們需要使用CSS3的關鍵幀動畫（keyframes）來定義晃動的動畫效果。我們將動畫命名為“shake”，并設置它的動畫時間為0.5秒（0.5s），動畫的緩動效果為“ease-in-out”，并且設置它在交替（alternate）運動模式下無限循環。

在動畫的關鍵幀中，我們將圖片的top屬性從0變化到10px，以模擬上下晃動的效果。此外，我們還將圖片進行了旋轉（rotate）-5度，以讓圖片更加生動。

最后，我們只需要將動畫應用到圖片（img）選擇器中即可。這樣，圖片就會自動開始運行上下晃動的動態效果了。

總之，使用CSS3來實現圖片上下晃動的動態效果是一項相對簡單的任務，只需要使用position、animation、top以及keyframes等屬性就可以實現。希望這篇文章對你有所啟發。