CSS實現波浪動畫背景是一種非常炫酷的網頁設計效果，可以使網站看起來更加動感和生動。實現這種效果的方法其實非常簡單，只需要用到CSS中的一些動畫屬性和貝塞爾曲線即可。

.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px; /* 視情況而定 */
background-repeat: repeat-x;
background-position: 0 bottom;
}
.wave::before,
.wave::after {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: 0;
background-image: url("wave.svg"); /* 背景圖片為波浪形狀 */
background-repeat: repeat-x;
background-position: 0 bottom;
animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* 用到了貝塞爾曲線 */
}
.wave::before {
animation-delay: -0.2s; /* 加上延遲效果，讓波浪形狀錯開 */
}
.wave::after {
animation-delay: -0.4s;
}
@keyframes wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-50%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-100%) translateZ(0) scaleY(1)
}
}

如上面的代碼所示，我們首先創建一個波浪形狀的背景，并設置它的位置和大小。接著，我們用:before和:after偽元素來創建出兩個相同的波浪形狀，并設置動畫效果。最后，我們用@keyframes定義動畫的具體過程，實現波浪形狀的移動效果。

在使用這種效果時，我們還可以進行一些其他的優化，比如減少背景圖片的大小以提高頁面加載速度，或者結合其他動畫效果來實現更加復雜的網頁設計。