<div id="clock">
  <span id="minutehand"></span>
  <span id="hourhand"></span>
  <span id="secondhand"></span>
</div>
* {
  box-sizing: border-box;
}
body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_embroidery.png);
}

#clock {
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  border: 5px double #333;
  background: -webkit-radial-gradient(#333333, #000000);
  background: radial-gradient(#333333, #000000);
  margin: 2rem auto;
  position: relative;
}

#hourhand, #minutehand, #secondhand {
  position: absolute;
  background: white;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3);
}

#hourhand {
  width: 4%;
  height: 30%;
  left: calc(50% - (4% / 2));
  top: calc(50% - 30%);
}

#minutehand {
  width: 2%;
  height: 40%;
  left: calc(50% - (2% / 2));
  top: calc(50% - 40%);
}

#secondhand {
  width: 1%;
  height: 45%;
  background: red;
  left: calc(50% - (1% / 2));
  top: calc(50% - 45%);
}
View Compiled
var d = new Date();
var hands = [secondhand,minutehand,hourhand];
var initDeg = [6*d.getSeconds(), 6*d.getMinutes(), 30*(d.getHours()%12) + d.getMinutes()/2];

for (var i = 0; i < hands.length; i++) {
  var stepper = i == 0 ? 60 : 0;
  var animate = hands[i].animate([
    { transform: 'rotate(' + initDeg[i] + 'deg)' },
    { transform: 'rotate(' + (initDeg[i] + 360) + 'deg)' }
  ], {
    duration: 1000 * Math.pow(60, i + 1),
    easing: 'steps(' + stepper + ', start)',
    iterations: Infinity
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.