最近一个小程序项目有一个设计图，需要一个圆环，有两种颜色分布，分别代表可用量和冻结量.如果直接这样显示，感觉不水平？？所以我决定做一个动态！看了mdn上的渐变（gradients）、过渡（transitions）、动画（animations）的新特性，不禁感叹CSS真牛！这三个新特性加上canvas，似乎瞬间就具备了js正面的能力。用js很难过渡得这么完美，而且浏览器的css渲染性能比js好很多。然后看了张新旭（据说是css高手）的一篇关于rings的博文，觉得很神奇。Link=>纯CSS3种方法实现中间镂空的12色彩虹渐变环，才服气！除了能够灵活运用CSS的各种特性，我最佩服辛老师的是他的创造性思维。会让你感叹：卧槽，还有这种操作？！我想起了高中物理老师每次装逼时说的一句话：心有多远，能走多远。虽然demo和我的需求不太一样，问题还是没有解决，但是仔细看了还是收获不少，对我后面的代码很有帮助。辛老师这篇博文的重点还是在渐变上，我需要实现动态平滑连续的颜色分布。比如整个环本来是绿色的，然后慢慢的有60%被红色占据，整个过程一定要流畅。最接近我需求的是倒计时demo，一个用linear-gradient线性渐变实现的彩色圆环demo，但不是连续的过程，而是每次切割30度。看了一些其他的博文，好像找不到合适的，只好自己想一个！因为再写这个demo的时候，发现小程序和H5在css性能上还是有一些差异的（具体差异总结在文末），所以贴上H5的代码比较好。不多说，直接上代号代号部分//html部分
