炫酷的圆形进度条

还没有封装成插件,不过我会尽快的。GitHub

效果图如下,目前仅仅是展示样式。这里随带讲一下这个样式是如何实现的。

炫酷的圆形进度条_第1张图片

核心技术使用canvas 与 js实现。

从外到内依次讲解,光源来至左上方。

1.最外面的是一个灰色的圆环,外加一个有效方偏移的阴影

2.蓝色的方块 来源于 18 deg的扇形,加上间距才18deg

3.一个白色到灰色的线性渐变的圆环。起点:- √ ̄2*R/2 , √ ̄2*R/2 终点 - √ ̄2*R/2 , √ ̄2*R/2

4.一个灰色到白色的线性渐变圆环。起点:- √ ̄2*R/2 , √ ̄2*R/2 终点 - √ ̄2*R/2 , √ ̄2*R/2

5.一个白色到灰色的线性渐变圆环,起点:- √ ̄2*R/2 , √ ̄2*R/2 终点 - √ ̄2*R/2 , √ ̄2*R/2

6.一个灰色到白色的渐变圆。。起点:0 ,0 终点 - √ ̄2*R/2 , √ ̄2*R/2

7。中间的字体 水平 垂直居中。


你可能感兴趣的:(HTML,css3)