CSS作為網頁設計的重要組成部分，其動畫效果應用廣泛，而廣告飄動效果在網頁中也是比較常見的。本文將介紹如何使用CSS實現廣告飄動的效果。

/*定義動畫的關鍵幀*/
@keyframes float {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(100px, -30px);
}
100% {
transform: translate(200px, 0);
}
}
/*為廣告容器添加動畫*/
.ad{
position: fixed;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
animation: float 4s ease-in-out infinite;
}

首先我們要定義動畫的關鍵幀，即廣告從起點到終點的過程，這里我們定義了三個關鍵幀，分別是從(0,0)平移至(100px,-30px)，再從(100px,-30px)平移至(200px,0)，達到廣告不斷向右飄動的效果。

然后在廣告容器的樣式中，我們將其定位在瀏覽器窗口的中心位置，并且設置動畫屬性，包括動畫名稱、時間、緩動效果和循環模式。

最后，我們只需要在HTML中引入廣告容器的樣式，就能看到廣告不斷地在頁面上飄動了。