钟

最新推荐文章于 2022-04-09 15:33:22 发布

elegancy_

最新推荐文章于 2022-04-09 15:33:22 发布

阅读量491

点赞数

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>钟</title>
<script src="jQuery/jquery-1.8.2.min.js"></script>
<style>
.clock{
	width:200px;
	height:200px;
	border-radius:100%;
	position:relative;
	background-image:url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/6880637_10180600137.jpg);
	background-size:100%;
}

.line{
	height:4px;
	background-color:red;
	margin-left:-15px;
	margin-top:-2px;
}
.original{
	position:absolute;
	left:50%;
	top:50%;
	width:1px;
	height:1px;
	float:left;

}
.clock>.point{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-5px;
	margin-top:-6px;
	width:3px;
	height:3px;
	padding:5px;
	background-color:red;
	border-radius:13px;
}
.original.seconds{
	-webkit-animation:rotate_origin 60s linear infinite;
	animation:rotate_origin 60s linear infinite;
}
.original.seconds>.line{
	background-color:red;
	width:100px;
	height:2px;
}
.original.minutes{
	-webkit-animation:rotate_origin 3600s linear infinite;
	animation:rotate_origin 3600s linear infinite;
}
.original.minutes>.line{
	background-color:blue;
	width:80px;
	height:3px;
}
.original.hours{
	-webkit-animation:rotate_origin 86400s linear infinite;
	animation:rotate_origin 86400s linear infinite;
}
.original.hours>.line{
	width:60px;
	background-color:green;
}
@-webkit-keyframes rotate_origin{
	from{
		-webkit-transform:rotateZ(0deg);
	}
	to{
		-webkit-transform:rotateZ(360deg);
	}
}
@keyframes rotate_origin{
	from{
		transform:rotateZ(0deg);
	}
	to{
		transform:rotateZ(360deg);
	}
}
</style>
<script>
</script>
</head>
<body>
		<div class="clock">
			<div class="original hours">
				<div class="line"></div>
			</div>
			<div class="original minutes">
				<div class="line"></div>
			</div>
			<div class="original seconds">
				<div class="line"></div>
			</div>
			<div class="point"></div>
			
		</div>
</body>
</html>