html5水流效果,通过css和js实现水流效果，附效果图和原理解析

css和js实现水流效果

最终实现的效果图

效果图

实现的原理

原理图

通过1 和2实现三角形(当然最终也可以制作成圆形或者其他形状)，水波的原理在于3，主要是通过动画的transform:rotate()旋转360deg和border-radius而生成。

水波不断增高是通过改变width、height、left、top而成。就是让它旋转的中心点不断变高，水流的快慢可以通过具体的animation的时间或者width,height来改变。

html代码

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; /*超出的隐藏*/

}<