使用css实现计时功能

1、使用css实现计时功能time demohtml, body height: 100%;body font-family: "microsoft yahei"font-size: 18px;margin: 0;padding: 0;.site-wrapper display: table;width: 100%;height: 100%;min-height: 100%;.site-wrapper-inner vertical-align: middle;display: table-cell;.site-wrapper-content width: 240

2、px;margin: 0 auto;text-align: center;.time margin: 10px 0 0 80px;padding: 0;list-style: none;.time:after content: ""display: block;height: 0;clear: both;visibility: hidden;.time > li text-align: center;float: left;position: relative;overflow: hidden;width: 10px;height: 20px;line

3、-height: 20px;.time > li > div position: absolute;line-height: 20px;keyframes step6 from top: 0;to top: -120px;-moz-keyframes step6 /* firefox */from top: 0;to top: -120px;-webkit-keyframes step6 /* safari 和 chrome */from top: 0;to top: -120px;-o-keyframes step6 /* opera */from top: 0;to top:

4、-120px;keyframes step10 from top: 0;to top: -200px;-moz-keyframes step10 /* firefox */from top: 0;to top: -200px;-webkit-keyframes step10 /* safari 和 chrome */from top: 0;to top: -200px;-o-keyframes step10 /* opera */from top: 0;to top: -200px;.min1 animation: step6 steps(6) 3600s infinite;-moz-anim

5、ation: step6 steps(6) 3600s infinite; /* firefox */-webkit-animation: step6 steps(6) 3600s infinite; /* safari 和 chrome */-o-animation: step6 steps(6) 3600s infinite; /* opera */.min2 animation: step10 steps(10) 600s infinite;-moz-animation: step10 steps(10) 600s infinite; /* firefox */-webkit-anima

6、tion: step10 steps(10) 600s infinite; /* safari 和 chrome */-o-animation: step10 steps(10) 600s infinite; /* opera */.sec1 animation: step6 steps(6) 60s infinite;-moz-animation: step6 steps(6) 60s infinite; /* firefox */-webkit-animation: step6 steps(6) 60s infinite; /* safari 和 chrome */-o-animation

7、: step6 steps(6) 60s infinite; /* opera */.sec2 animation: step10 steps(10) 10s infinite;-moz-animation: step10 steps(10) 10s infinite; /* firefox */-webkit-animation: step10 steps(10) 10s infinite; /* safari 和 chrome */-o-animation: step10 steps(10) 10s infinite; /* opera */.mil1 animation: step10

8、steps(10) 1s infinite;-moz-animation: step10 steps(10) 1s infinite; /* firefox */-webkit-animation: step10 steps(10) 1s infinite; /* safari 和 chrome */-o-animation: step10 steps(10) 1s infinite; /* opera */.mil2 animation: step10 steps(10) 0.1s infinite;-moz-animation: step10 steps(10) 0.1s infinite

9、; /* firefox */-webkit-animation: step10 steps(10) 0.1s infinite; /* safari 和 chrome */-o-animation: step10 steps(10) 0.1s infinite; /* opera */.mil3 animation: step10 steps(10) 0.01s infinite;-moz-animation: step10 steps(10) 0.01s infinite; /* firefox */-webkit-animation: step10 steps(10) 0.01s inf

10、inite; /* safari 和 chrome */-o-animation: step10 steps(10) 0.01s infinite; /* opera */.min1, .min2, .sec1, .sec2, .mil1, .mil2, .mil3 animation-play-state: paused;-moz-animation-play-state: paused; /* firefox */-webkit-animation-play-state: paused; /* safari 和 chrome */-o-animation-play-state: pause

11、d; /* opera */start:checked .time .min1,start:checked .time .min2,start:checked .time .sec1,start:checked .time .sec2,start:checked .time .mil1,start:checked .time .mil2,start:checked .time .mil3 animation-play-state: running;-moz-animation-play-state: running; /* firefox */-webkit-animation-play-st

12、ate: running; /* safari 和 chrome */-o-animation-play-state: running; /* opera */stop:checked .time .min1,stop:checked .time .min2,stop:checked .time .sec1,stop:checked .time .sec2,stop:checked .time .mil1,stop:checked .time .mil2,stop:checked .time .mil3 animation-play-state: paused;-moz-animation-p

13、lay-state: paused; /* firefox */-webkit-animation-play-state: paused; /* safari 和 chrome */-o-animation-play-state: paused; /* opera */reset:checked .time .min1,reset:checked .time .min2,reset:checked .time .sec1,reset:checked .time .sec2,reset:checked .time .mil1,reset:checked .time .mil2,reset:checked .time .mil3 animation: none;-moz-animation: none; /* firefox */-webkit-animation: non