css+动态水效果图 |css相关内容

/* 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);
}
}

在网页设计中，动态水效果图是一种非常受欢迎的效果。通过CSS的动画技术，大家可以模拟出水流一般的效果，给用户带来非常生动的体验。

首先，在HTML中大家需要设置一个容器元素，例如

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

然后，在CSS中设置.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规则，对水流动画效果进行定义。

@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%三个关键帧，大家可以分别设置不同的水流动画效果，以实现水流涟漪的效果。

最后，将定义好的.water元素对应的水流动画效果应用到CSS中即可。

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

以上就是实现CSS + 动态水效果图的全部代码。可以看到，通过CSS的动画技术，大家可以非常方便地实现水流涟漪的效果，并且这种效果往往能够给用户带来非常生动的体验。