在網頁設計中，圖片漂浮效果是常用的一種效果。通過CSS控制圖片的漂浮效果可以使網頁看起來更加生動，讓用戶感到更加親切。下面我們來介紹一下如何通過CSS來控制圖片漂浮。

img {
position: absolute;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
from {
transform: translate(0, 0);
}
65% {
transform: translate(0, -10px);
}
to {
transform: translate(0, 0);
}
}

上面的代碼中，我們首先設置了圖片的位置屬性為“absolute”，即絕對定位。接著我們定義了一個名為“float”的動畫，這個動畫將使圖片在Y軸方向上進行漂浮。我們使用了“transform”屬性來改變圖片的平移，這個屬性是CSS3中很重要的屬性之一。

在使用動畫時，通常需要控制動畫的“過程”和“結束”狀態。由于“float”動畫定義了三個關鍵幀點，分別對應動畫的“開始”、“中間”、“結束”狀態。在動畫進行的過程中，圖片會不斷地從一個狀態過渡到另一個狀態，最終實現漂浮的效果。

通過上述代碼，我們便可以實現圖片漂浮的效果。在實際應用中，我們可以根據需要調整動畫的時長以及關鍵幀的位置，實現不同的效果，從而讓網頁看起來更加生動。