CSS3圆环倒计时效果

最新推荐文章于 2022-09-03 10:29:18 发布

sysutangxiaoxi

最新推荐文章于 2022-09-03 10:29:18 发布

阅读量2.5k

点赞数

<!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>

sysutangxiaoxi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS3圆环倒计时效果

CSS3圆环倒计时效果 .pie { width:200px; height:200px; background-color:blue; border-radius:100px; position:absolute; } .pie1{ clip:rect(0,200px,200px,100px); background:-moz-radial-gradient
复制链接

扫一扫