在網頁設計中，飄動的圖片是一種常見的效果，可以增添頁面的動感和活力，吸引用戶的眼球。實現這個效果主要靠HTML和CSS的配合。 首先，我們需要在HTML中插入一張圖片，可以使用img標簽，例如：

<img src="images/flower.png" alt="花" >

接著，在CSS中對圖片進行樣式設置。使用position屬性和top、left屬性可以讓圖片實現左右飄動的效果。例如：

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

在這個示例中，我們定義了一個名為float的動畫，讓圖片向右上方飄動。運用animation屬性將動畫應用到img標簽上，使得圖片不斷循環飄動，直到用戶關閉網頁。 需要注意的是，使用position屬性時，需要設置父元素的position屬性為relative，否則圖片的位置可能會出現偏差。 最終呈現出來的效果是一張飄動的花朵圖案，緩緩左右飄動，增添頁面的動感和趣味。 總結起來，HTML和CSS的組合能夠實現諸多令人驚嘆的效果，飄動的圖片就是其中之一。希望通過這個簡單的示例，能夠讓大家更深入地了解HTML和CSS的使用方法。