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

.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樣式表中定義動畫的關(guān)鍵幀和持續(xù)時間。在這里，我們使用“transform: translateY”來實現(xiàn)圖片的向上移動和下降。同時，我們還要指定動畫名稱、時長和循環(huán)次數(shù)。

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

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