CSS3動畫給了我們更多的創意可能，比如圖片向上漂浮動畫。現在就來學習如何輕松實現它。

.float-img {
animation: float 2s ease-in-out infinite;
transform-origin: center bottom;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}

首先，我們需要定義一個包含圖片的HTML元素，并且以類名為“float-img”進行標記。接著，我們在CSS樣式表中定義動畫的關鍵幀和持續時間。在這里，我們使用“transform: translateY”來實現圖片的向上移動和下降。同時，我們還要指定動畫名稱、時長和循環次數。

最后，我們要聲明元素的變換中心為中間底部，確保圖片的浮動旋轉圍繞其下部進行。這種方法可以使圖片的動畫看起來更加自然。

現在，您的圖片已經可以在頁面上漂浮了。您可能需要根據頁面設計和元素布局對CSS量身定制。這里只是一個簡單的示例。隨著CSS3動畫的不斷壯大，您可以用無數種方式來展現您的想象力。