CSS3圆环倒计时效果

转载地址: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

 

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