* {
	padding:0;
	margin:0;
}
.clock {
	width:300px;
	height:300px;
	border:10px solid #ccc;
	/*border-radius:160px;
	*/
            /*百分比参照元素的实际宽高*/
            border-radius:50%;
	margin:100px auto;
	position:relative;
}
.line {
	width:8px;
	height:300px;
	background-color:#ccc;
	position:absolute;
	/*参照父容器的宽*/
            left:50%;
	top:0;
	/*参照元素本身*/
            transform:translate(-50%,0);
}
.line1,.line4 {
	width:10px;
	background-color:rgb(224,15,15);
}
.line2 {
	transform:translate(-50%,0) rotate(30deg);
}
.line3 {
	transform:translate(-50%,0) rotate(60deg);
}
.line4 {
	transform:translate(-50%,0) rotate(90deg);
}
.line5 {
	transform:translate(-50%,0) rotate(120deg);
}
.line6 {
	transform:translate(-50%,0) rotate(150deg);
}
.cover {
	width:250px;
	height:250px;
	border-radius:50%;
	background-color:#fff;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.hour {
	width:6px;
	height:80px;
	background-color:red;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-100%);
	transform-origin:center bottom;
	animation:clockAnimation 43200s linear infinite;
}
.minute {
	width:4px;
	height:90px;
	background-color:green;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-100%);
	transform-origin:center bottom;
	animation:clockAnimation 3600s linear infinite;
}
.second {
	width:2px;
	height:100px;
	background-color:blue;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-100%);
	/*设置旋转轴心*/
            transform-origin:center bottom;
	/*添加动画*/
            animation:clockAnimation 60s infinite steps(60);
	/*steps(60)与animation-timing-function的其它属性冲突*/
            /*animation-timing-function:steps(60);
	*/
}
.center {
	width:20px;
	height:20px;
	background-color:#ccc;
	border-radius:50%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
/*创建动画*/
        @keyframes clockAnimation {
	from {
	transform:translate(-50%,-100%) rotate(0deg);
}
to {
	transform:translate(-50%,-100%) rotate(360deg);
}
}