在眾多的網(wǎng)頁設計中，水面漂浮效果算是一種很炫酷的設計元素。通過簡單的CSS代碼，就能夠模擬出水面漂浮的效果，為頁面增添更多的生動感和趣味性。

// HTML代碼
<div class="water">
<div class="wave wave1"></div>
<div class="wave wave2"></div>
</div>
// CSS代碼
.water {
position: relative;
height: 200px;
width: 100%;
background-color: #2299dd;
overflow: hidden;
}
.wave {
position: absolute;
width: 100%;
height: 50px;
background-repeat: repeat-x;
bottom: 0;
z-index: 1;
}
.wave1 {
background-image: url('wave1.png');
animation: animate1 2s linear infinite;
}
.wave2 {
background-image: url('wave2.png');
animation: animate2 2s linear infinite;
}
@keyframes animate1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-120%);
}
}

以上代碼中，我們使用一個水面的容器元素，在里面嵌套了兩個波浪元素。這兩個波浪元素的高度都是50px，即決定了波浪的高度。同時，我們也通過CSS規(guī)定了水面的高度和背景顏色。

各位注意到了嗎？我們在波浪元素中設置了background-image，這是我們用來替換原本純色的背景的。同時，我們也通過background-repeat: repeat-x規(guī)定了圖片水平平鋪。這樣，波浪元素的背景就成了一個很長的波浪圖案，看起來就是水面上波浪起伏的效果。

最后，我們利用CSS的animation屬性，讓波浪元素進行左移的動畫效果，模擬出波浪隨風擺動的真實感覺。至此，CSS水面漂浮效果的設計就完成了，看起來是不是很不錯啊！