北京中科中医院好不好 http://www.xuexily.com/npxxc/npxyl/824.htmlcss和js实现水流效果最终实现的效果图效果图实现的原理原理图通过1和2实现三角形（当然最终也可以制作成圆形或者其他形状），水波的原理在于3，主要是通过动画的transform:rotate()旋转deg和border-radius而生成。水波不断增高是通过改变width、height、left、top而成。就是让它旋转的中心点不断变高，水流的快慢可以通过具体的animation的时间或者width,height来改变。html代码divclass=water_shadow/divdivclass=water_wrapdivclass=water/div/divcss代码（初始状态的）.water_wrap{height:px;width:px;border:1pxsolidblack;position:absolute;top:18px;transform:rotate(45deg);/*倾斜45度*/left:50%;top:50%;margin-top:-px;margin-left:-70px;overflow:hidden;/*超出的隐藏*/}/*矩形上面的遮罩*/.water_shadow{height:87px;width:px;left:50%;top:50%;background:rgb(,,);transform:ratate(45deg);position:absolute;margin-top:-px;margin-left:-99px;z-index:2;}.water{position:absolute;height:50px;width:50px;top:px;left:%;transform:ratate(45deg);margin-left:-50px;animation:water3slinearinfinite;/*动画模拟水流的滚动*/background:rgb(9,,);border-radius:34%;/*模拟水流的波浪*/}keyframeswater{from{transform:rotate(0);}to{transform:rotate(deg);}}js代码，通过改变水流的高度具体的可以通过更改css来实现，（你可以将其结合到具体业务逻辑上去）以下是水流的5个状态(.water).get(0).style.cssText=left:%;top:95px;border-radius:34%;width:60%;height:60%;;(.water).get(0).style.cssText=left:%;top:77px;border-radius:33%;width:%;height:%;;(.water).get(0).style.cssText=left:85%;top:65px;border-radius:32%;width:%;height:%;;(.water).get(0).style.cssText=left:64%;top:36px;border-radius:36%;width:%;height:%;;(.water).get(0).style.cssText=left:44%;top:6px;border-radius:45%;width:%;height:%;;原文链接
转载请注明：http://www.aierlanlan.com/rzgz/7858.html
