转载地址:http://liumiao.me/demo/count/
效果演示
src="http://liumiao.me/demo/count/step12.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px; font-family: 微软雅黑;font-size:14px;">实现步骤分解
Step1
普通的正方形
src="http://liumiao.me/demo/count/step1.html" scrolling="no" frameborder="0" style="border-width: 0px; margin: 0px 20px; display: block; width: 400px; height: 250px;">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
加入渐变、阴影等修饰,及倒计时数字