Clocky

by Sam Westwood

HTML

<time>
    
    <span class="min"></span>
    <span class="sec"></span>
    <span class="hour"></span>
    <img class="clock" src="https://i.imgur.com/39WLAZa.png" width="220px" height="auto">
    
</time>

CSS

/* clock animation */

/* WebKit */
span.hour { -webkit-animation: tick 70s steps(12, end) infinite; }
span.min  { -webkit-animation: tick 30s steps(60, end) infinite; }
span.sec  { -webkit-animation: tick 10s steps(100, end) infinite; }

@-webkit-keyframes tick {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}

/* Moz */
span.hour {    -moz-animation: tick 70s steps(12, end) infinite; }
span.min  {    -moz-animation: tick 30s steps(60, end) infinite; }
span.sec  {    -moz-animation: tick 10s steps(100, end) infinite; }

@-moz-keyframes tick {
    from { -moz-transform: rotate(  0deg); }
      to { -moz-transform: rotate(360deg); }
}



/* just some basic styling */

.clock {
  margin-top:-40px;
  margin-left:-20px;
  
}

time {
  margin-top:40px;
  margin-left:16px;
    position: relative;
    display: inline-block;
    width: 200px; height: 200px;
    border-radius: 100px;
   
}
span {
  
    position: absolute;
    left: 100px;
    height: 100px;
    -webkit-transform-origin: bottom center;
       -moz-transform-origin: bottom center;
}


span.hour { box-shadow: black 0 0 0 5px; height: 50px; top: 50px; }
span.min  { box-shadow: blue 0 0 0 3px; height: 80px; top: 20px; }
span.sec  { box-shadow:   red 0 0 0 1px; height: 90px; top: 10px; }