做了个球状进度条

想做个类似网络游戏里面的回血效果。表现到页面上就是个球状的进度条。想来想去不知道怎么实现，也没有好图让我动态更新底图。结果想了一个很撮的办法，用div设置圆角画出两个圆。一个div只画圆边，设置透明度，设置z-index 3，另一个div画实心圆，设置z-index 1.然后在来个div设置z-index 2 。三个div绝对定位到相同地方，然后通过改变z-index 2的div的高就可以让z-index 1的实心圆慢慢露出来，最终实现球状进度条。
这种感觉相识视觉欺骗！不知道还有更好的办法么！

转载于:https://www.cnblogs.com/lovezhaolei/p/3195355.html