canvas 水滴图、液体进度条、仿加速球、圆球水波图
传送门:https://github.com/guoyoujin/WaterMoire <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > test </ title > < style > body { display : flex ; flex-flow : column wrap ; justify-content : center ; align-items : center ; } #c { margin-top : 20px ; } input[type=range]::before { content : attr(min) ; color : #000 ; padding-right : 5px ; } input[type=range]::after { content : attr(max) ; color : #000 ; padding-left : 5px ; } </ style > </ head > < body > < canvas id ="c" > 当前浏览器不支持canvas 请升级! </ canvas > < input type ="range" name ="range" min ="0" max ="100" step