body {
	perspective:1000px;
}
.clock {
	height:300px;
	width:300px;
	border:1px solid #5dac81;
	border-radius:50% 50%;
	margin:100px auto;
	background:#005CAF;
	box-shadow:0 0 10px 2px #FC9F4D;
	position:relative;
	transform-style:preserve-3d;
	animation:hd 3s ease 0.1s 1 both;
	box-shadow:100px 100px 30px  10px rgba(0,0,0,0.2);
	transform:scale(0);
	opacity:0;
}
@keyframes hd {
	20% {
	transform:scale(1);
	opacity:0.2;
}
40% {
	transform:scale(0.6);
	opacity:0.4;
}
60% {
	transform:scale(1);
	opacity:0.6;
}
80% {
	transform:scale(0.8);
	opacity:0.8;
}
100% {
	transform:scale(1);
	background-image:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
	opacity:1;
}
}.big {
	height:300px;
	width:300px;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
}
.small {
	height:10px;
	width:1px;
	background:#FBE251;
	position:absolute;
	top:0;
	left:50%;
}
.small span {
	color:#fff;
	position:relative;
	top:10px;
	left:-7px;
	font-size:18px;
}
.cm {
	height:5px;
	width:1px;
	background:#FBE251;
	position:absolute;
	top:0;
	left:50%;
}
.dian {
	width:16px;
	height:16px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	z-index:10;
}
.s {
	width:2px;
	height:100px;
	position:absolute;
	top:51px;
	left:149px;
	background:#C73E3A;
	transform-origin:bottom left;
}
.m {
	width:4px;
	height:80px;
	position:absolute;
	background:#F75C2F;
	top:71px;
	left:148px;
	transform-origin:bottom left;
	z-index:1;
}
.h {
	width:6px;
	height:60px;
	position:absolute;
	background:#FAD689;
	top:91px;
	left:147px;
	transform-origin:bottom left;
	margin:0 auto;
	z-index:0;
}