Step2

用"border-radius"实现圆形

src="http://liumiao.me/demo/count/step2.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step3

用"clip:rect"遮罩为半圆

src="http://liumiao.me/demo/count/step3.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step4

父级增加一层DIV

src="http://liumiao.me/demo/count/step4.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step5

把父级DIV用"clip:rect"遮罩为一半

src="http://liumiao.me/demo/count/step5.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step6

用"transform:rotate"连续改变扇形旋转角度

src="http://liumiao.me/demo/count/step6.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step7

同理复制左半边扇形旋转

src="http://liumiao.me/demo/count/step7.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step8

拼接两个扇形

src="http://liumiao.me/demo/count/step8.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step9

控制两个扇形旋转时间相差30秒

src="http://liumiao.me/demo/count/step9.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step10

去掉辅助背景，添加一个底衬背景

src="http://liumiao.me/demo/count/step10.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step11

加入一个圆形覆盖在最上面，形成圆环形式

src="http://liumiao.me/demo/count/step11.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">

Step12

加入渐变、阴影等修饰，及倒计时数字