CSS3 实现的钟表效果代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它利用CSS3实现了钟表效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.clock{
	width:200px;
	height:200px;
	border-radius:100%;
	position:relative;
	background-image:url(demo/CSS/img/zhongbiao.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>
</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>

CSS3 实现的钟表效果代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS3 实现的钟表效果代码实例就介绍到这了。

CSS3 实现的钟表效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容