CSS是網站設計中的一個重要組成部分，它可以用來控制網頁中各種元素的樣式和布局，包括圖片。如果想要讓圖片動起來，我們就需要使用CSS的動畫效果。

img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes slide {
0% {
transform: translate(-50%, -50%);
}
50% {
transform: translate(-50%, -80%);
}
100% {
transform: translate(-50%, -50%);
}
}

代碼中的img選擇器表示對圖片進行樣式控制，其中position屬性設置為absolute，表示該圖片相對于頁面區域進行布局，top和left屬性設置為50%，表示圖片在垂直和水平方向上居中。transform屬性中的translate函數則將圖片向左上方移動一定的距離，從而將圖片的中心點移動到頁面區域的中心位置。

而動畫效果則通過CSS中的@keyframes規則來實現。我們定義了一個名為slide的動畫，包含三個關鍵幀，分別對應著圖片的初始狀態、中間狀態和結束狀態。在每個關鍵幀中，我們使用transform屬性來改變圖片的位置，從而讓圖片在頁面上產生位移變化。通過設置animation-duration屬性和animation-iteration-count屬性，我們可以控制動畫的持續時間和循環次數。

綜上所述，使用CSS的動畫效果可以讓網頁中的圖片產生生動的變化，提升網站的視覺效果和用戶體驗。