效果图
代码部分
希望各位大佬来小弟的博客捧捧场 www·youmeng·me 感激不尽~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3圆形进度条时分秒计时器js特效</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400);
* {
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: 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: 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;
position: 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-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;
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 {
height: 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.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-weight: 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);
}
}
</style>
</head>
<body>
<!-- <script src="/demos/googlegg.js"></script> -->
<div class="timer-group">
<div class="timer hour">
<div class="hand"><span></span></div>
<div class="hand"><span></span></div>
</div>
<div class="timer minute">
<div class="hand"><span></span></div>
<div class="hand"><span></span></div>
</div>
<div class="timer second">
<div class="hand"><span></span></div>
<div class="hand"><span></span></div>
</div>
<div class="face">
<h2>css3计时器</h2>
<p id="lazy">00:00:00</p>
</div>
</div>
<script>
var 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');
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
}());
tick();
function tick() {
var now = new Date()
, elapsed = now - startDate
, parts = [];
parts[0] = '' + Math.floor( elapsed / one_hour );
parts[1] = '' + Math.floor( (elapsed % one_hour) / one_minute );
parts[2] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );
parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];
parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];
parts[2] = (parts[2].length == 1) ? '0' + parts[2] : parts[2];
face.innerText = parts.join(':');
requestAnimationFrame(tick);
}
</script>
</div>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao50608.shtml
