CSS波浪效果是一種非常炫酷的網頁設計效果。通過使用CSS動畫和偽元素，在網頁上制作出波動起伏的曲線，可以讓網頁看起來更加生動、幽雅、充滿活力。

.wave {
position: relative;
height: 150px;
background: #003973;
}
.wave::before,
.wave::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 120px;
background: #fff;
opacity: 0.3;
z-index: -1;
}
.wave::before {
top: 20px;
transform: skewY(-5deg);
animation: wave 5s infinite linear;
}
.wave::after {
top: 40px;
transform: skewY(-10deg);
animation: wave2 5s infinite linear;
}
@keyframes wave {
0% {
transform: skewY(-5deg) translateX(-50%);
}
100% {
transform: skewY(-5deg) translateX(50%);
}
}
@keyframes wave2 {
0% {
transform: skewY(10deg) translateX(-50%);
}
100% {
transform: skewY(10deg) translateX(50%);
}
}

上面的代碼是實現波浪效果的關鍵代碼，使用了偽元素:before和:after來實現波浪效果的兩個部分。分別設置了其位置、大小、顏色、透明度、z軸順序，并通過transform屬性來實現斜切和平移。使用了CSS動畫，在5秒內不斷改變transform的值，讓波浪效果不斷循環播放，并通過linear眼眸模式實現漸變效果。

通過HTML和CSS實現的波浪效果，不僅讓網頁更加生動鮮活，而且還可以有效提高用戶體驗，增加頁面的美觀程度。不過在使用中也需注意不過度使用，過多的波浪效果會影響網頁視覺效果，反而會造成反效果。