CSS3提供了很多有趣又炫酷的效果，其中圖片上下浮動也是其中的一種。通過CSS的transition和position屬性，我們可以輕松實現(xiàn)這個效果。

/* HTML *//* CSS */
img {
position: relative;
transition: top 0.3s ease-in-out;
}
img:hover {
top: -5px;
}

以上代碼中，我們首先將圖片的position屬性設(shè)置為relative，使它相對于原來的位置移動。然后為圖片設(shè)置transition屬性，使它的上下移動有一定的緩動效果。

當鼠標懸停在圖片上時，我們就將圖片的top屬性設(shè)置為負值，讓它向上移動。因為我們設(shè)置了transition屬性，所以圖片的移動會有一個平滑的過渡效果。

除了上面這種“懸停移動”的效果，我們還可以通過CSS3中的animation屬性來實現(xiàn)圖片不停的上下浮動，給人一種飄蕩的感覺。

/* HTML *//* CSS */
.floating {
position: relative;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
top: 0;
}
50% {
top: -5px;
}
100% {
top: 0;
}
}

以上代碼中，我們?yōu)閳D片設(shè)置了一個名為“floating”的class，并在CSS中定義了一個名為“float”的動畫。該動畫在3秒內(nèi)循環(huán)不斷地播放。

在“float”動畫中，我們分別定義了圖片top屬性在不同時間段內(nèi)的取值。當動畫播放時，圖片會按照定義的取值在上下方向上移動，從而形成了圖片的浮動效果。

總的來說，CSS3為我們提供了很多有趣又實用的效果，讓我們在設(shè)計網(wǎng)頁時更加豐富多彩。而圖片上下浮動效果則是其中的一種，簡單易學，而且可以讓網(wǎng)頁顯得更加活潑有趣。