CSS + 動(dòng)態(tài)水效果圖

/* CSS代碼 */
.container {
position: relative;
overflow: hidden;
height: 400px;
background: #333;
}
.water {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: url(./water.png) repeat-x;
animation: water 2s cubic-bezier(0.2, 0.4, 0.4, 1) infinite;
}
@keyframes water {
0% {
background-position: 0 0;
transform: translate(0, 0);
}
50% {
background-position: 0 5px;
transform: translate(0, -2px);
}
100% {
background-position: 0 0;
transform: translate(0, 0);
}
}

在網(wǎng)頁設(shè)計(jì)中，動(dòng)態(tài)水效果圖是一種非常受歡迎的效果。通過CSS的動(dòng)畫技術(shù)，我們可以模擬出水流一般的效果，給用戶帶來非常生動(dòng)的體驗(yàn)。

首先，在HTML中我們需要設(shè)置一個(gè)容器元素，例如

<div class="container">
<div class="water"></div>
</div>

然后，在CSS中設(shè)置.container元素的高度和背景顏色，再將.water元素絕對定位到bottom:0，即底部。

.container {
position: relative;
overflow: hidden;
height: 400px;
background: #333;
}
.water {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: url(./water.png) repeat-x;
}

接著，我們需要使用CSS3的@keyframes規(guī)則，對水流動(dòng)畫效果進(jìn)行定義。

@keyframes water {
0% {
background-position: 0 0;
transform: translate(0, 0);
}
50% {
background-position: 0 5px;
transform: translate(0, -2px);
}
100% {
background-position: 0 0;
transform: translate(0, 0);
}
}

通過0%、50%、100%三個(gè)關(guān)鍵幀，我們可以分別設(shè)置不同的水流動(dòng)畫效果，以實(shí)現(xiàn)水流漣漪的效果。

最后，將定義好的.water元素對應(yīng)的水流動(dòng)畫效果應(yīng)用到CSS中即可。

.water {
...
animation: water 2s cubic-bezier(0.2, 0.4, 0.4, 1) infinite;
}

以上就是實(shí)現(xiàn)CSS + 動(dòng)態(tài)水效果圖的全部代碼。可以看到，通過CSS的動(dòng)畫技術(shù)，我們可以非常方便地實(shí)現(xiàn)水流漣漪的效果，并且這種效果往往能夠給用戶帶來非常生動(dòng)的體驗(yàn)。