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

.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);
}
}

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

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