波浪CSS效果是一種非常炫酷的效果，它適用于各種網頁設計中。下面我們就來介紹一下如何使用CSS創建一個波浪效果。

.wave{
position: relative;
height: 100px;
overflow: hidden;
background: #fff;
}
.wave:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg);
opacity: .5;
z-index: -1;
}
.wave:after{
content: "";
position: absolute;
bottom: -150px;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to right, #6dd5ed 0%, #6dd5ed 25%, #ffffff 25%, #ffffff 50%, #ddeeee 50%, #ddeeee 75%, #ffffff 75%, #ffffff 100%);
animation: wave 1s linear infinite;
}
@keyframes wave{
0%{
transform: translateX(0) translateY(-10px);
}
100%{
transform: translateX(-100%) translateY(-10px);
}
}

上面的代碼中，我們首先創建了一個類名為wave的div容器，這個容器用來承載波浪效果。我們使用了一個:before偽元素，給它一個半透明的背景圖片，用來加強效果。然后我們創建了一個:after偽元素，它是創建波浪效果的關鍵。我們給它一個線性漸變的背景色，從左到右漸變，形成波浪形狀。然后我們使用了animation屬性，對這個元素進行動畫處理，讓它在x軸上不斷移動，形成動態的波浪效果。

這樣一個簡單的波浪效果就創建好了，你可以嘗試將它用在你的網頁設計中，會給你帶來驚喜的效果。