SOURCE

<div class="clock">
		<div class="line line1"></div>
		<div class="line line2"></div>
		<div class="line line3"></div>
		<div class="line line4"></div>
		<div class="line line5"></div>
		<div class="line line6"></div>
		<div class="cover"></div>
		<div class="hour"></div>
		<div class="min"></div>
		<div class="sec"></div>
		
		<div class="center"></div>
	</div>

.clock {
			margin: 100px auto;
			width: 400px;
			height: 400px;
			border: 10px solid #ccc;
			border-radius: 50%;
			position: relative;
		}
		.line {
            width: 8px;
            height: 400px;
            position: absolute;
            background-color: #ccc;
            top: 50%;
            margin-top: -200px;
            left: 50%;
            margin-left: -4px;
		}
		.line2 {
			transform: rotate(30deg);
		}
		.line3 {
			transform: rotate(60deg);
		}
		.line4 {
			transform: rotate(90deg);
		}
		.line5 {
			transform: rotate(120deg);
		}
		.line6 {
			transform: rotate(150deg);
		}
	    .cover {
	    	width: 380px;
	    	height: 380px;
	    	background-color: #fff;
	    	border-radius: 50%;
	    	position: absolute;
	    	left: 50%;
	    	top: 50%;
	    	margin-top: -190px;
	    	margin-left: -190px;
	    }
	    .line1,.line4 {
	    	width: 10px;
	    }
        .hour {
        	width: 10px;
        	height: 100px;
        	background-color: red;
        	position: absolute;
        	top: 50%;
        	left:50%;
        	margin-left: -5px;
            margin-top:-100px; 
        	transform-origin: center bottom;
        	animation:clockMove 43200s infinite;      /* 时钟运动为43200s 不需要分步 */

        }
        .min {
        	width: 8px;
        	height: 120px;
        	background-color: green;
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	margin-left: -4px;
        	margin-top: -120px;
        	transform-origin: center bottom;
        	animation: clockMove 3600s infinite;	/* 分钟运动为3600s, 不需要分步 */
        }
        .sec {
        	width: 6px;
        	height: 140px;
        	background-color: blue;
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	margin-left: -3px;
        	margin-top: -140px; 
        	transform-origin: center bottom;
        	animation: clockMove 60s infinite steps(60);	/* 秒钟运动时间为60s 分步运动60步 */
        }
        .center {
        	width: 20px;
        	height: 20px;
        	border-radius: 50%;
        	position: absolute;
        	background-color: #ccc;
        	top: 50%;
        	left: 50%;
        	margin-top: -10px;
        	margin-left: -10px;
        }
        @keyframes clockMove {
        	0% {
                transform: rotate(0);
        	}
        	100%{
               transform: rotate(360deg);
        	}
        }