<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
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.