在網頁設計中，經常會用到圖片，如何讓圖片有趣呢？可以通過CSS實現圖片上下飄動的效果。

.img {
position: relative;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}

首先需要設置img元素的position屬性為relative，這樣才能相對于img元素的初始位置移動。接著使用CSS動畫來實現飄動的效果。在@keyframes中定義transform屬性的變化，通過translateY()函數來控制元素的上下移動。

以上代碼中，動畫名稱為float，持續時間為5秒，運動時的速度為ease-in-out，無限循環。在transform屬性中，通過設置translateY()函數的值來讓元素上下移動。一開始的位置是0px，到50%的時候上移10px，再到100%的時候回到原來的位置。

對于多個圖片，只需要將CSS選擇器改為對應的class或id即可。

通過CSS實現圖片上下飄動的效果，可以讓網頁更生動有趣，增加用戶的體驗感。