水波浪效果是現(xiàn)在很流行的網(wǎng)頁UI特效之一。CSS中實(shí)現(xiàn)水波浪效果的方法有很多，下面就來介紹一下其中一種實(shí)現(xiàn)方法。

/* CSS樣式代碼 */
.wave {
position: relative;
overflow: hidden;
height: 100px;
margin: 0 auto;
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.wave:before {
content: "";
display: block;
position: absolute;
background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, 0) 80%);
width: 100%;
height: 50px;
bottom: 0;
left: 0;
z-index: 1;
transform-origin: center bottom;
transform: rotate(-3deg);
animation: wave 2s infinite linear;
}
.wave:after {
content: "";
display: block;
position: absolute;
background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, 0) 80%);
width: 100%;
height: 50px;
bottom: 0;
left: 0;
z-index: 2;
transform-origin: center bottom;
transform: rotate(3deg);
animation: wave 2s infinite linear;
}
@keyframes wave {
0% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}

上面的代碼中，我們設(shè)置了一個(gè)div容器，通過偽元素:before和:after來實(shí)現(xiàn)兩個(gè)水波浪形狀，同時(shí)動畫效果也是通過CSS3的動畫屬性來實(shí)現(xiàn)。其中需要注意的是，我們的偽元素必須設(shè)置好position的值，以及需要設(shè)置好transform-origin的值，才能夠?qū)崿F(xiàn)水波浪的效果。

當(dāng)然，我們可以針對不同的需求，對水波浪的樣式和動畫細(xì)節(jié)進(jìn)行不斷的調(diào)整和優(yōu)化，以便更好地讓水波浪特效能夠融入到我們的網(wǎng)頁中。