<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3圆环倒计时效果</title>
<style>
.pie {
width:200px;
height:200px;
background-color:blue;
border-radius:100px;
position:absolute;
}
.pie1{
clip:rect(0,200px,200px,100px);
background:-moz-radial-gradient(20% 50% 0deg, #333, #0000ff);
background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff));
}
.pie2{
clip:rect(0px,100px,200px,0px);
background:-moz-radial-gradient(80% 50% 0deg, #333, #0000ff);
background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff));
}
.hold{
width:200px;
height:200px;
position:absolute;
z-index:1;
}
.hold1{
clip:rect(0,200px,200px,100px);
}
.hold2 {
clip:rect(0px,100px,200px,0px);
}
.bg{
width:200px;
height:200px;
background:red;
border-radius:100px;
position:absolute;
box-shadow:0px 0px 8px #333;
background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000);
background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000));
}
.time{
width:160px;
height:160px;
margin:20px 0 0 20px;
background:#fff;
border-radius:100px;
position:absolute;
z-index:1;
box-shadow:0px 0px 8px #333 inset;
}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
i = 0;
j = 0;
count = 0;
function start1(){
i = i + 0.6;
count = count + 1;
if(count>=300){
count = 0;
clearInterval(t1);
t2 = setInterval('star2()',100);
}
$(".pie1").css("-o-transform","rotate(" + i + "deg)");
$(".pie1").css("-moz-transform","rotate(" + i + "deg)");
$(".pie1").css("-webkit-transform","rotate(" + i + "deg)");
};
function start2(){
j = j + 0.6;
count = count + 1;
if(count>=300){
count = 0;
clearInterval(t2);
t1 = setInterval("star1()",100);
}
$(".pie2").css("-o-transform","rotate(" + i + "deg)");
$(".pie2").css("-moz-transform","rotate(" + i + "deg)");
$(".pie2").css("-webkit-transform","rotate(" + i + "deg)");
}
setInterval("start1()",100);
</script>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"></div>
<div class="time"></div>
</body>
</html>
CSS3圆环倒计时效果
最新推荐文章于 2024-07-16 15:25:44 发布