<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <style> body { margin:0; padding:0; } canvas { background-image: radial-gradient(black, hsl(10,90%,15%)); margin:0; } @-webkit-keyframes spin-one { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-one { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin-two { 0% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } } @keyframes spin-two { 0% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } } html, body { height: 100%; } body { background: #dedede; background: linear-gradient(45deg, #dedede 0%, #efefef 100%); } .wrapper { width: 100%; min-width: 840px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .digit { max-width: calc((60px + 4px) * 3); float: left; } .sep { max-width: calc((60px + 4px) * 1); float: left; } .sep .clock #hand-1 { -webkit-animation: spin-one 10s linear infinite; animation: spin-one 10s linear infinite; } .sep .clock #hand-2 { -webkit-animation: spin-two 10s linear infinite alternate; animation: spin-two 10s linear infinite alternate; } .clock { width: 60px; height: 60px; background: -webkit-gradient(linear, right top, left top, from(#eee), to(#fff)); background: linear-gradient(270deg, #eee 0%, #fff 100%); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); border-radius: 100%; position: relative; margin: 2px; float: left; } .clock span { position: absolute; top: calc(50% - 1px); left: 50%; width: 49%; height: 2px; background: #323232; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-transition: all ease 2s; transition: all ease 2s; } .clock span:before { content: ''; position: absolute; top: 0; left: -1px; width: 2px; height: 2px; display: block; background: inherit; border-radius: 100%; } #clock-1 #hand-1, #clock-9 #hand-1 { -webkit-transition: all ease-in 1.5s; transition: all ease-in 1.5s; } #clock-1 #hand-2, #clock-9 #hand-2 { -webkit-transition: all ease 2s; transition: all ease 2s; } #clock-2 #hand-1, #clock-10 #hand-1 { -webkit-transition: all ease-out 4s; transition: all ease-out 4s; } #clock-2 #hand-2, #clock-10 #hand-2 { -webkit-transition: all ease-in 1.75s; transition: all ease-in 1.75s; } #clock-3 #hand-1, #clock-11 #hand-1 { -webkit-transition: all linear 3s; transition: all linear 3s; } #clock-3 #hand-2, #clock-11 #hand-2 { -webkit-transition: all ease-in 1s; transition: all ease-in 1s; } #clock-4 #hand-1, #clock-12 #hand-1 { -webkit-transition: all ease-out 2.3s; transition: all ease-out 2.3s; } #clock-4 #hand-2, #clock-12 #hand-2 { -webkit-transition: all ease 2.15s; transition: all ease 2.15s; } #clock-5 #hand-1, #clock-13 #hand-1 { -webkit-transition: all ease-in 4s; transition: all ease-in 4s; } #clock-5 #hand-2, #clock-13 #hand-2 { -webkit-transition: all ease-out 3s; transition: all ease-out 3s; } #clock-6 #hand-1, #clock-14 #hand-1, #clock-18 #hand-1 { -webkit-transition: all linear 2.3s; transition: all linear 2.3s; } #clock-6 #hand-2, #clock-14 #hand-2, #clock-18 #hand-2 { -webkit-transition: all ease-out 1.2s; transition: all ease-out 1.2s; } #clock-7 #hand-1, #clock-15 #hand-1 { -webkit-transition: all ease-in 4s; transition: all ease-in 4s; } #clock-7 #hand-2, #clock-15 #hand-2 { -webkit-transition: all ease 1.5s; transition: all ease 1.5s; } #clock-8 #hand-1, #clock-16 #hand-1 { -webkit-transition: all ease 2s; transition: all ease 2s; } #clock-8 #hand-2, #clock-16 #hand-2 { -webkit-transition: all ease 2.6s; transition: all ease 2.6s; } #clock-9 #hand-1, #clock-17 #hand-1 { -webkit-transition: all linear 1.3s; transition: all linear 1.3s; } #clock-9 #hand-2, #clock-17 #hand-2 { -webkit-transition: all ease 2.4s; transition: all ease 2.4s; } .t-1 #clock-2 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-1 #clock-2 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-1 #clock-3 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-1 #clock-3 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-1 #clock-5 #hand-1, .t-1 #clock-6 #hand-1, .t-1 #clock-8 #hand-1, .t-1 #clock-9 #hand-1, .t-1 #clock-11 #hand-1, .t-1 #clock-12 #hand-1, .t-1 #clock-14 #hand-1, .t-1 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-1 #clock-5 #hand-2, .t-1 #clock-6 #hand-2, .t-1 #clock-8 #hand-2, .t-1 #clock-9 #hand-2, .t-1 #clock-11 #hand-2, .t-1 #clock-12 #hand-2, .t-1 #clock-14 #hand-2, .t-1 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-1 #clock-17 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-1 #clock-17 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-1 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-1 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-2 #clock-1 #hand-1, .t-2 #clock-7 #hand-1, .t-2 #clock-11 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-2 #clock-1 #hand-2, .t-2 #clock-7 #hand-2, .t-2 #clock-11 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-2 #clock-2 #hand-1, .t-2 #clock-17 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-2 #clock-2 #hand-2, .t-2 #clock-17 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-2 #clock-3 #hand-1, .t-2 #clock-15 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-2 #clock-3 #hand-2, .t-2 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-2 #clock-4 #hand-1, .t-2 #clock-14 #hand-1, .t-2 #clock-16 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-2 #clock-4 #hand-2, .t-2 #clock-14 #hand-2, .t-2 #clock-16 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-2 #clock-5 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-2 #clock-5 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-2 #clock-6 #hand-1, .t-2 #clock-9 #hand-1, .t-2 #clock-10 #hand-1, .t-2 #clock-13 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-2 #clock-6 #hand-2, .t-2 #clock-9 #hand-2, .t-2 #clock-10 #hand-2, .t-2 #clock-13 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-2 #clock-8 #hand-1, .t-2 #clock-12 #hand-1, .t-2 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-2 #clock-8 #hand-2, .t-2 #clock-12 #hand-2, .t-2 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-3 #clock-1 #hand-1, .t-3 #clock-7 #hand-1, .t-3 #clock-13 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-3 #clock-1 #hand-2, .t-3 #clock-7 #hand-2, .t-3 #clock-13 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-3 #clock-2 #hand-1, .t-3 #clock-17 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-3 #clock-2 #hand-2, .t-3 #clock-17 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-3 #clock-3 #hand-1, .t-3 #clock-11 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-3 #clock-3 #hand-2, .t-3 #clock-11 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-3 #clock-4 #hand-1, .t-3 #clock-10 #hand-1, .t-3 #clock-16 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-3 #clock-4 #hand-2, .t-3 #clock-10 #hand-2, .t-3 #clock-16 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-3 #clock-5 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-3 #clock-5 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-3 #clock-6 #hand-1, .t-3 #clock-9 #hand-1, .t-3 #clock-12 #hand-1, .t-3 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-3 #clock-6 #hand-2, .t-3 #clock-9 #hand-2, .t-3 #clock-12 #hand-2, .t-3 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-3 #clock-8 #hand-1, .t-3 #clock-14 #hand-1, .t-3 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-3 #clock-8 #hand-2, .t-3 #clock-14 #hand-2, .t-3 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-4 #clock-1 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-4 #clock-1 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-4 #clock-3 #hand-1, .t-4 #clock-11 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-4 #clock-3 #hand-2, .t-4 #clock-11 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-4 #clock-10 #hand-1, .t-4 #clock-17 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-4 #clock-10 #hand-2, .t-4 #clock-17 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-4 #clock-2 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-4 #clock-2 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-4 #clock-4 #hand-1, .t-4 #clock-5 #hand-1, .t-4 #clock-6 #hand-1, .t-4 #clock-7 #hand-1, .t-4 #clock-8 #hand-1, .t-4 #clock-9 #hand-1, .t-4 #clock-12 #hand-1, .t-4 #clock-14 #hand-1, .t-4 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-4 #clock-4 #hand-2, .t-4 #clock-5 #hand-2, .t-4 #clock-6 #hand-2, .t-4 #clock-7 #hand-2, .t-4 #clock-8 #hand-2, .t-4 #clock-9 #hand-2, .t-4 #clock-12 #hand-2, .t-4 #clock-14 #hand-2, .t-4 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-4 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-4 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-5 #clock-1 #hand-1, .t-5 #clock-5 #hand-1, .t-5 #clock-13 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-5 #clock-1 #hand-2, .t-5 #clock-5 #hand-2, .t-5 #clock-13 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-5 #clock-2 #hand-1, .t-5 #clock-17 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-5 #clock-2 #hand-2, .t-5 #clock-17 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-5 #clock-3 #hand-1, .t-5 #clock-9 #hand-1, .t-5 #clock-11 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-5 #clock-3 #hand-2, .t-5 #clock-9 #hand-2, .t-5 #clock-11 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-5 #clock-8 #hand-1, .t-5 #clock-10 #hand-1, .t-5 #clock-16 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-5 #clock-8 #hand-2, .t-5 #clock-10 #hand-2, .t-5 #clock-16 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-5 #clock-4 #hand-1, .t-5 #clock-7 #hand-1, .t-5 #clock-12 #hand-1, .t-5 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-5 #clock-4 #hand-2, .t-5 #clock-7 #hand-2, .t-5 #clock-12 #hand-2, .t-5 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-5 #clock-6 #hand-1, .t-5 #clock-14 #hand-1, .t-5 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-5 #clock-6 #hand-2, .t-5 #clock-14 #hand-2, .t-5 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-6 #clock-1 #hand-1, .t-6 #clock-5 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-6 #clock-1 #hand-2, .t-6 #clock-5 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-6 #clock-3 #hand-1, .t-6 #clock-9 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-6 #clock-3 #hand-2, .t-6 #clock-9 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-6 #clock-8 #hand-1, .t-6 #clock-16 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-6 #clock-8 #hand-2, .t-6 #clock-16 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-6 #clock-6 #hand-1, .t-6 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-6 #clock-6 #hand-2, .t-6 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-6 #clock-2 #hand-1, .t-6 #clock-17 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-6 #clock-2 #hand-2, .t-6 #clock-17 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-6 #clock-4 #hand-1, .t-6 #clock-7 #hand-1, .t-6 #clock-10 #hand-1, .t-6 #clock-12 #hand-1, .t-6 #clock-13 #hand-1, .t-6 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-6 #clock-4 #hand-2, .t-6 #clock-7 #hand-2, .t-6 #clock-10 #hand-2, .t-6 #clock-12 #hand-2, .t-6 #clock-13 #hand-2, .t-6 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-6 #clock-11 #hand-1 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .t-6 #clock-11 #hand-2 { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .t-6 #clock-14 #hand-1 { -webkit-transform: rotate(240deg); transform: rotate(240deg); } .t-6 #clock-14 #hand-2 { -webkit-transform: rotate(300deg); transform: rotate(300deg); } .t-7 #clock-1 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-7 #clock-1 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-7 #clock-2 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-7 #clock-2 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-7 #clock-3 #hand-1, .t-7 #clock-5 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-7 #clock-3 #hand-2, .t-7 #clock-5 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-7 #clock-6 #hand-1, .t-7 #clock-8 #hand-1, .t-7 #clock-9 #hand-1, .t-7 #clock-11 #hand-1, .t-7 #clock-12 #hand-1, .t-7 #clock-14 #hand-1, .t-7 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-7 #clock-6 #hand-2, .t-7 #clock-8 #hand-2, .t-7 #clock-9 #hand-2, .t-7 #clock-11 #hand-2, .t-7 #clock-12 #hand-2, .t-7 #clock-14 #hand-2, .t-7 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-7 #clock-4 #hand-1, .t-7 #clock-17 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-7 #clock-4 #hand-2, .t-7 #clock-17 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-7 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-7 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-8 #clock-1 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-8 #clock-1 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-8 #clock-3 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-8 #clock-3 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-8 #clock-16 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-8 #clock-16 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-8 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-8 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-8 #clock-2 #hand-1, .t-8 #clock-17 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-8 #clock-2 #hand-2, .t-8 #clock-17 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-8 #clock-4 #hand-1, .t-8 #clock-6 #hand-1, .t-8 #clock-7 #hand-1, .t-8 #clock-9 #hand-1, .t-8 #clock-10 #hand-1, .t-8 #clock-12 #hand-1, .t-8 #clock-13 #hand-1, .t-8 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-8 #clock-4 #hand-2, .t-8 #clock-6 #hand-2, .t-8 #clock-7 #hand-2, .t-8 #clock-9 #hand-2, .t-8 #clock-10 #hand-2, .t-8 #clock-12 #hand-2, .t-8 #clock-13 #hand-2, .t-8 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-8 #clock-5 #hand-1, .t-8 #clock-11 #hand-1 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .t-8 #clock-5 #hand-2, .t-8 #clock-11 #hand-2 { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .t-8 #clock-8 #hand-1, .t-8 #clock-14 #hand-1 { -webkit-transform: rotate(240deg); transform: rotate(240deg); } .t-8 #clock-8 #hand-2, .t-8 #clock-14 #hand-2 { -webkit-transform: rotate(300deg); transform: rotate(300deg); } .t-9 #clock-1 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-9 #clock-1 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-9 #clock-3 #hand-1, .t-9 #clock-11 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-9 #clock-3 #hand-2, .t-9 #clock-11 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-9 #clock-10 #hand-1, .t-9 #clock-17 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-9 #clock-10 #hand-2, .t-9 #clock-17 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-9 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-9 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-9 #clock-2 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-9 #clock-2 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-9 #clock-4 #hand-1, .t-9 #clock-6 #hand-1, .t-9 #clock-7 #hand-1, .t-9 #clock-9 #hand-1, .t-9 #clock-12 #hand-1, .t-9 #clock-14 #hand-1, .t-9 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-9 #clock-4 #hand-2, .t-9 #clock-6 #hand-2, .t-9 #clock-7 #hand-2, .t-9 #clock-9 #hand-2, .t-9 #clock-12 #hand-2, .t-9 #clock-14 #hand-2, .t-9 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-9 #clock-5 #hand-1 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .t-9 #clock-5 #hand-2 { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .t-9 #clock-8 #hand-1 { -webkit-transform: rotate(240deg); transform: rotate(240deg); } .t-9 #clock-8 #hand-2 { -webkit-transform: rotate(300deg); transform: rotate(300deg); } .t-0 #clock-1 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-0 #clock-1 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-0 #clock-3 #hand-1 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-0 #clock-3 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-0 #clock-16 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-0 #clock-16 #hand-2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-0 #clock-18 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-0 #clock-18 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-0 #clock-2 #hand-1, .t-0 #clock-17 #hand-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .t-0 #clock-2 #hand-2, .t-0 #clock-17 #hand-2 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-0 #clock-4 #hand-1, .t-0 #clock-6 #hand-1, .t-0 #clock-7 #hand-1, .t-0 #clock-8 #hand-1, .t-0 #clock-9 #hand-1, .t-0 #clock-10 #hand-1, .t-0 #clock-12 #hand-1, .t-0 #clock-13 #hand-1, .t-0 #clock-11 #hand-1, .t-0 #clock-15 #hand-1 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .t-0 #clock-4 #hand-2, .t-0 #clock-6 #hand-2, .t-0 #clock-7 #hand-2, .t-0 #clock-8 #hand-2, .t-0 #clock-9 #hand-2, .t-0 #clock-10 #hand-2, .t-0 #clock-12 #hand-2, .t-0 #clock-13 #hand-2, .t-0 #clock-11 #hand-2, .t-0 #clock-15 #hand-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-0 #clock-5 #hand-1 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .t-0 #clock-5 #hand-2 { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .t-0 #clock-14 #hand-1 { -webkit-transform: rotate(240deg); transform: rotate(240deg); } .t-0 #clock-14 #hand-2 { -webkit-transform: rotate(300deg); transform: rotate(300deg); } </style> <div class="wrapper"> <div class="hours"> <div class="digit"> <div class="clock" id="clock-1"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-2"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-3"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-4"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-5"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-6"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-7"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-8"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-9"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-10"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-11"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-12"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-13"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-14"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-15"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-16"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-17"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-18"> <span id="hand-1"></span> <span id="hand-2"></span></div> </div> <div class="digit"> <div class="clock" id="clock-1"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-2"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-3"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-4"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-5"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-6"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-7"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-8"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-9"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-10"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-11"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-12"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-13"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-14"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-15"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-16"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-17"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-18"> <span id="hand-1"></span> <span id="hand-2"></span></div> </div> </div> <div class="sep"> <div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div> <div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div> <div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div> <div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div> <div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div> <div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div> </div> <div class="minutes"> <div class="digit"> <div class="clock" id="clock-1"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-2"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-3"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-4"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-5"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-6"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-7"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-8"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-9"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-10"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-11"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-12"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-13"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-14"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-15"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-16"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-17"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-18"> <span id="hand-1"></span> <span id="hand-2"></span></div> </div> <div class="digit"> <div class="clock" id="clock-1"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-2"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-3"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-4"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-5"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-6"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-7"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-8"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-9"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-10"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-11"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-12"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-13"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-14"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-15"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-16"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-17"> <span id="hand-1"></span> <span id="hand-2"></span></div> <div class="clock" id="clock-18"> <span id="hand-1"></span> <span id="hand-2"></span></div> </div> </div> </div> <script> var currentDate, currentHours, currentMinutes, currentSeconds, hours = [], minutes = [], seconds = []; function updateDate() { currentDate = new Date(); currentHours = currentDate.getHours(); if (currentHours < 10) { currentHours = '0' + currentHours; } currentMinutes = currentDate.getMinutes(); if (currentMinutes < 10) { currentMinutes = '0' + currentMinutes; } currentSeconds = currentDate.getSeconds(); if (currentSeconds < 10) { currentSeconds = '0' + currentSeconds; } } function splitDigits(stringVal, array) { var tempString = stringVal.toString(); array.length = 0 for (var i = 0; i < tempString.length; i++) { array.push(+tempString.charAt(i)); } } function printClass(value, elem) { elem.attr('class', 'digit').addClass('t-'+value); } $(document).ready(function() { setInterval(function() { updateDate(); splitDigits(currentSeconds, seconds); splitDigits(currentMinutes, minutes); splitDigits(currentHours, hours); printClass(hours[0], $('.hours .digit:first-of-type')); printClass(hours[1], $('.hours .digit:last-of-type')); printClass(minutes[0], $('.minutes .digit:first-of-type')); printClass(minutes[1], $('.minutes .digit:last-of-type')); }, 1000); }); </script>