css3水流动

CSS3提供了许多炫酷的效果，其中水流动效果是比较有趣的一个。通过使用CSS3动画和变换属性，我们可以轻松地实现这样的效果。

.wave {
    position: relative;
    width: 400px;
    height: 300px;
    background-color: #1abc9c;
    overflow: hidden;
}
.wave:before, .wave:after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #f1c40f;
    bottom: -100px;
    border-radius: 50%;
    animation-name: wave;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.wave:before {
    left: 50px;
    transform-origin: 100px 100px;
    animation-delay: -0.5s;
}
.wave:after {
    left: 250px;
    transform-origin: 100px 100px;
}
@keyframes wave {
0% {
    transform: translate(0, 0);
}
50% {
    transform: translate(100px, 50px);
}
100% {
    transform: translate(0, 0);
}
}
    

上面的代码演示了简单的水流动效果，首先我们创建了一个高300px、宽400px，背景为#1abc9c的波浪区域。接下来是波浪的实现，使用伪元素:before和:after，设置宽高为200px，并将它们放到波浪区域的下边缘。接下来是关键的动画部分，通过CSS3动画和变换属性，实现了波浪上下的移动效果。

在:before和:after上，我们还设置了不同的transform-origin属性以使它们运动的方式看起来更加真实。

通过上面的代码，我们可以轻松地实现水流动效果，并加以修改，以实现更多的变化。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！