css3环形进度条的实现

所谓环形进度条,就是下面这个样子滴,根据里面数字的变化,呈现不同的弧度

那么怎样实现呢。

最土也是最暴力的方法,搞几十个背景图!!根据数字,显示不同的背景图,多么简单粗暴啊- –

当然,今天要说的方法还是用到css3的一些特性的,如果要兼容低端ie,那偶只能深深的表示一下同情- -,做背景图去吧

思路

其实一半的圆弧很简单的有木有,用border就可以实现啦

好像有哪里不对 – -,环肿么是歪的,简单,transform一下就好啦

但是10%这种肿么办呢,这里就要借助clip剪切了

先看一下怎么实现左边圆弧,左边圆弧旋转了90度

只看左边一半,右边无视掉

左右圆弧


最后就是根据数字不同,实现不同大小圆弧

One Response

  1. 微个日光日说道:

    我也搞了一个类似的东西:http://xiebaochun.github.io/mylab/HTML5/TimeCircles/