CSS背景海浪效果是一種獨特的效果，可以為網站增添生動活潑的氣息。下面是一個例子：

.ocean {
background: #0077be;
background-image: linear-gradient(white 5%, transparent 5%, transparent 95%, white 95%);
height: 100%;
position: relative;
}
.wave {
background: #222;
height: 32px;
position: absolute;
bottom: 0;
width: 100%;
animation: wave 3s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}

首先，我們創建了一個名為ocean的CSS類，其中包括了背景顏色、漸變背景圖案和位置相關的屬性。在這個類中，我們還指定了一個相對定位屬性，以便將其他的CSS類相對于ocean類進行定位。

接著，我們創建了名為wave的CSS類。其中包含了背景、高度和位置相關的屬性，以及循環動畫效果所需的實現代碼。通過使用@keyframes標簽，我們定義了一個名為wave的動畫。該動畫將通過3秒鐘的時間，以三次貝塞爾曲線為緩動函數的方式進行不斷重復播放。

最后，我們將這兩個CSS類應用到HTML標簽上。通過這種方式，我們可以為網站增添一個唯美的海浪效果，讓用戶在享受瀏覽網站的同時，感受自然的美好。