CSS的計時器特效

1、css的計時器特效效果圖代碼部分希翼各位大佬來小弟的博客捧捧場 www·youmeng·me 感激不盡css3圓形進度條時分秒計時器js特效import url(* box-sizing: border-box;html background: 111 url(http:/codepen.io/images/classy_fabric.png);color: fff;font-family: 'yanone kaffeesatz', sans-serif;body padding: 20px;.timer-group height:

2、400px;margin: 0 auto;position: relative;width: 400px;.timer border-radius: 50%;height: 100px;overflow: hidden;position: absolute;width: 100px;.timer:after background: 111 url(http:/codepen.io/images/classy_fabric.png);border-radius: 50%;content: ""display: block;height: 80px;left:

3、10px;position: absolute;width: 80px;top: 10px;.timer .hand float: left;height: 100%;overflow: hidden;position: relative;width: 50%;.timer .hand span border: 50px solid rgba(0, 255, 255, .4);border-bottom-color: transparent;border-left-color: transparent;border-radius: 50%;display: block;height: 0;po

4、sition: absolute;right: 0;top: 0;transform: rotate(225deg);width: 0;.timer .hand:first-child transform: rotate(180deg);.timer .hand span animation-duration: 4s;animation-iteration-count: infinite;animation-timing-function: linear;.timer .hand:first-child span animation-name: spin1;.timer .hand:last-

5、child span animation-name: spin2;.timer.hour background: rgba(0, 0, 0, .3);height: 400px;left: 0;width: 400px;top: 0;.timer.hour .hand span animation-duration: 3600s;border-top-color: rgba(255, 0, 255, .4);border-right-color: rgba(255, 0, 255, .4);border-width: 200px;.timer.hour:after height: 360px;

6、left: 20px;width: 360px;top: 20px;.timer.minute background: rgba(0, 0, 0, .2);height: 350px;left: 25px;width: 350px;top: 25px;.timer.minute .hand span animation-duration: 60s;border-top-color: rgba(0, 255, 255, .4);border-right-color: rgba(0, 255, 255, .4);border-width: 175px;.timer.minute:after hei

7、ght: 310px;left: 20px;width: 310px;top: 20px;.timer.second background: rgba(0, 0, 0, .2);height: 300px;left: 50px;width: 300px;top: 50px;.timer.second .hand span animation-duration: 1s;border-top-color: rgba(255, 255, 255, .15);border-right-color: rgba(255, 255, 255, .15);border-width: 150px;.timer.

8、second:after height: 296px;left: 2px;width: 296px;top: 2px;.face background: rgba(0, 0, 0, .1);border-radius: 50%;height: 296px;left: 52px;padding: 165px 40px 0;position: absolute;width: 296px;text-align: center;top: 52px;.face h2 font-weight: 300;.face p border-radius: 20px;font-size: 76px;font-wei

9、ght: 400;position: absolute;top: 17px;width: 260px;left: 20px;keyframes spin1 0% transform: rotate(225deg);50% transform: rotate(225deg);100% transform: rotate(405deg);keyframes spin2 0% transform: rotate(225deg);50% transform: rotate(405deg);100% transform: rotate(405deg); -> css3計時器00:00:00var

10、defaults = , one_second = 1000, one_minute = one_second * 60, one_hour = one_minute * 60, one_day = one_hour * 24, startdate = new date(), face = document.getelementbyid('lazy');/ var requestanimationframe = (function() return window.requestanimationframe |window.webkitrequestanimationframe

11、|window.mozrequestanimationframe |window.orequestanimationframe |window.msrequestanimationframe |function( callback )window.settimeout(callback, 1000 / 60);();tick();function tick() var now = new date(), elapsed = now - startdate, parts = ;parts0 = '' + math.floor( elapsed / one_hour );parts1 = '' + math.floor( (elapsed % one_hour) / one_minute );parts2 = '' + math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );parts0 = (parts0.length = 1) ? '0' + parts0 : parts0;parts1 = (parts1.len