CSS的背景圖片是網站設計中很重要的一部分。在CSS中，我們可以控制背景圖片在網頁上的位置、大小、重復方式等。然而，有時候我們想要背景圖片可以水平飄動，給網站增加一些動態感。下面就讓我們一起學習如何實現這個效果。

background-image: url('圖片路徑');
background-repeat: no-repeat;
background-position: center;
animation: horizontal-scroll 20s linear infinite;

如上所示，我們可以使用CSS animation屬性，創建一個名為horizontal-scroll的動畫，并將其應用于背景圖片。在這個動畫中，我們使用了linear動畫效果（即勻速運動），并設置了20秒的時間和無限次播放的屬性。這樣，背景圖片就可以水平飄動了。

@keyframes horizontal-scroll {
0% {
background-position: left top;
}
100% {
background-position: right top;
}
}

在CSS代碼中，我們還需要定義動畫的開始和結束狀態。在這個例子中，我們使用了左上方作為背景圖片的初始位置，在100%的時候將其移動到右上方。通過這個過程，我們就可以實現背景圖片的水平飄動了。

通過使用CSS的animation屬性和keyframe技術，我們可以很容易地實現網頁背景圖片的水平飄動，為網站增加一些動態感和活力。但是，需要注意的是，過度的動畫效果可能會影響網站的速度和用戶體驗，因此我們應該根據實際需求來合理使用動畫效果。