海浪是大自然中一種美麗的自然現(xiàn)象，而在網(wǎng)頁設(shè)計(jì)中，我們也可以利用CSS來展現(xiàn)海浪波動(dòng)的效果。下面我們將介紹幾種實(shí)現(xiàn)海浪波動(dòng)效果的CSS樣式。

/*第一種實(shí)現(xiàn)方法*/
.wave {
position: relative;
width: 100%;
height: 100px;
}
.wave:before {
content: "";
display: block;
position: absolute;
left: 50%;
top: 0;
width: 200%;
height: 60px;
background-image: linear-gradient(to right, #CCCCCC 20%, #FFFFFF 40%, #CCCCCC 60%);
transform: translateX(-50%);
z-index: 1;
}
/*第二種實(shí)現(xiàn)方法*/
.wave2 {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
}
.wave2:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
background: url('wave.png') bottom repeat-x;
width: 200%;
height: 150px;
animation-duration: 10s;
animation-name: wave;
animation-iteration-count: infinite;
transform-origin: center bottom;
z-index: 1;
}
@keyframes wave {
0% { transform: translateY(0) rotateZ(0); }
100% { transform: translateY(-25%) rotateZ(-360deg); }
}
/*第三種實(shí)現(xiàn)方法*/
.wave3 {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
}
.wave3:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
background: url('wave.png') bottom repeat-x;
width: 200%;
height: 150px;
animation-duration: 10s;
animation-name: wave3;
animation-iteration-count: infinite;
transform-origin: center bottom;
z-index: 1;
}
@keyframes wave3 {
0% { transform: translateY(0) rotateZ(0); }
20% { transform: translateY(-5px) rotateZ(-5deg); }
40% { transform: translateY(-10px) rotateZ(5deg); }
60% { transform: translateY(-15px) rotateZ(-5deg); }
80% { transform: translateY(-20px) rotateZ(5deg); }
100% { transform: translateY(-25px) rotateZ(0deg); }
}

以上就是三種實(shí)現(xiàn)海浪波動(dòng)效果的CSS樣式，可以根據(jù)自己的需求選擇其中一種或者組合使用。很明顯，第一種實(shí)現(xiàn)方法比較簡單易懂，而第二種和第三種則更為詳細(xì)，可以實(shí)現(xiàn)更豐富的效果。希望以上內(nèi)容對(duì)大家有所幫助。