css和js实现水流效果

最终实现的效果图

实现的原理

通过1 和2实现三角形（当然最终也可以制作成圆形或者其他形状），水波的原理在于3，主要是通过动画的transform:rotate()旋转360deg和border-radius而生成。
水波不断增高是通过改变width、height、left、top而成。就是让它旋转的中心点不断变高，水流的快慢可以通过具体的animation的时间或者
width,height来改变。

html代码

<div class="water_shadow"></div>
            <div class="water_wrap">
                <div class="water"></div>
            </div>

css代码（初始状态的）

.water_wrap {
    height: 128px;
    width: 128px;
    border: 1px solid black;
    position: absolute;
    top: 18px;
    transform: rotate(45deg); /*倾斜45度*/
    left: 50%;
    top: 50%;
    margin-top: -143px;
    margin-left: -70px;
    overflow: hidden;
 /*超出的隐藏*/
}
 /*矩形上面的遮罩*/
.water_shadow {
    height: 87px;
    width: 188px;
    left: 50%;
    top: 50%;
    background: rgb(255, 247, 247);
    transform: ratate(45deg);
    position: absolute;
    margin-top: -168px;
    margin-left: -99px;
    z-index: 2;
}
.water {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 104px;
    left: 120%;
    transform: ratate(45deg);
    margin-left: -50px;
    animation: water 3s linear infinite; /*动画模拟水流的滚动*/
    background: rgb(9, 174, 227);
    border-radius: 34%; /*模拟水流的波浪*/
}
@keyframes water {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

js代码，通过改变水流的高度

具体的可以通过更改css来实现，（你可以将其结合到具体业务逻辑上去）以下是水流的5个状态

$(".water").get(0).style.cssText = "left:116%;top:95px;border-radius:34%;width:60%;height:60%;";
$(".water").get(0).style.cssText = "left:101%;top:77px;border-radius:33%;width:100%;height:100%;";
$(".water").get(0).style.cssText = "left:85%;top:65px;border-radius:32%;width:150%;height:150%;";
$(".water").get(0).style.cssText = "left:64%;top:36px;border-radius:36%;width:250%;height:250%;";
$(".water").get(0).style.cssText = "left:44%;top:6px;border-radius:45%;width:340%;height:340%;";

 
源码 ==>  https://github.com/akbq2008/waterFlow