CSS3圆环倒计时效果 by liumiao.me 2011.12.20

这演示的是CSS3呀,你用IE浏览?换标准浏览器看吧!

效果演示

实现步骤分解

Step1

普通的正方形

Step2

用"border-radius"实现圆形

Step3

用"clip:rect"遮罩为半圆

Step4

父级增加一层DIV

Step5

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

Step6

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

Step7

同理复制左半边扇形旋转

Step8

拼接两个扇形

Step9

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

Step10

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

Step11

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

Step12

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