* {
	margin:0;
	padding:0
}
.clock {
	width:200px;
	height:200px;
	border:1px solid red;
	border-radius:50%;
	margin:200px auto;
	position:relative;
}
.clock span:first-of-type {
	display:inline-block;
	position:absolute;
	height:200px;
	left:50%;
	animation:zhuanquan 1s linear infinite
}
.clock span:nth-of-type(2) {
	display:inline-block;
	position:absolute;
	height:200px;
	left:50%;
	animation:zhuanquan 60s linear infinite
}
.clock span:last-of-type {
	display:inline-block;
	position:absolute;
	height:200px;
	left:50%;
	animation:zhuanquan 720s linear infinite
}
.clock span:first-of-type:before {
	position:absolute;
	bottom:50%;
	left:-.5px;
	display:inline-block;
	width:1px;
	height:100px;
	background:black;
	content:""
}
.clock span:nth-of-type(2):before {
	position:absolute;
	bottom:50%;
	left:-1.5px;
	display:inline-block;
	width:3px;
	height:80px;
	background:red;
	content:""
}
.clock span:last-of-type:before {
	position:absolute;
	bottom:50%;
	left:-2.5px;
	display:inline-block;
	width:5px;
	height:60px;
	background:#dbdbdb;
	content:""
}
@keyframes zhuanquan {
	0% {
	transform:rotate(0deg)
}
100% {
	transform:rotate(360deg)
}
}.clock p:before {
	position:absolute;
	bottom:0;
	transform:translateX(-50%) rotate(-180deg);
}
.clock p:after {
	position:absolute;
	top:0;
	transform:translateX(-50%)
}
.clock p {
	position:absolute;
	top:0;
	left:100px;
	width:1px;
	height:200px;
}
.clock p:nth-of-type(1) {
	transform:rotate(30deg)
}
.clock p:nth-of-type(1):after {
	content:"1";
}
.clock p:nth-of-type(1):before {
	content:"7";
}
.clock p:nth-of-type(2) {
	transform:rotate(60deg)
}
.clock p:nth-of-type(2):after {
	content:"2";
}
.clock p:nth-of-type(2):before {
	content:"8";
}
.clock p:nth-of-type(3) {
	background:rosybrown;
	transform:rotate(90deg)
}
.clock p:nth-of-type(3):after {
	content:"3";
}
.clock p:nth-of-type(3):before {
	content:"9";
}
.clock p:nth-of-type(4) {
	transform:rotate(120deg)
}
.clock p:nth-of-type(4):after {
	content:"4";
}
.clock p:nth-of-type(4):before {
	content:"10";
}
.clock p:nth-of-type(5) {
	transform:rotate(150deg)
}
.clock p:nth-of-type(5):after {
	content:"5";
}
.clock p:nth-of-type(5):before {
	content:"11";
}
.clock p:nth-of-type(6) {
	background:blueviolet;
	transform:rotate(180deg)
}
.clock p:nth-of-type(6):after {
	content:"6";
}
.clock p:nth-of-type(6):before {
	content:"12";
}