用css动态实现圆环百分比分配——初探css3动画

最近的小程序项目有个设计图要求做一个圆环，两种颜色分配，分别代表可用金额和冻结金额。要是就直接这么显示，感觉好像挺没水平？？于是我决定做个动态！

在mdn把新特性gradients(渐变)、transitions(过渡)、 animations(动画) 都看了一遍，不禁感叹css牛逼！这三个新特性加上canvas，仿佛一瞬间有了正面刚js的能耐。用js很难过渡得那么完美，而且浏览器的css渲染明显比用js性能好得多。
然后看了张鑫旭（传说中玩转css的那个男人）的一篇关于圆环的博文，拍案叫绝。链接=>3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
只能说服气！除了灵活运用各种css特性之外,鑫大佬最让我佩服的是他的创造性思维。会让你不禁感叹：卧槽，还有这种操作？！想到了高中物理老师每次装完逼讲的一句话：思想有多远，就能走多远。

虽然demo跟我的需求不太一样，问题还是没有解决，但我认真看完之后还是学会了很多，对我后面的代码帮助很大。鑫大佬这篇博文的重点还是在渐变，而我需要动态平缓连续得实现颜色的分配，比如原本整个环是绿色，然后慢慢地60%被红色占了，而且整个过程要平滑。跟我的需求最接近的就是倒计时那个demo，linear-gradient线性渐变实现的多彩圆环demo，但不是连续的过程，而是通过剪裁，每次剪30度。

看了其他一些博客分享，好像也没有找到合适的，那没办法了...只能自己想一个！
因为再写这个demo的时候，发现小程序和H5在css表现上还是有些差异（具体有哪些差异，在文末总结），所以还是贴H5代码好了。

不多说，直接上代码

---

代码部分

//html部分
<div