A Pen by Viktor Bezdek.

index.html

<div class="clock">
  <div class="clock--arrow clock__hours"></div>
  <div class="clock--arrow clock__minutes"></div>
  <div class="clock--arrow clock__seconds"></div>
</div>

Mostly-CSS-based-clock.markdown

Mostly CSS based clock

Should work in modern browsers. Done in 18 minutes.

A Pen by Viktor Bezdek on CodePen.

License.

script.js

(function(){
  var ticker = function() {
    var now = new Date(),
        seconds = now.getSeconds(),
        minutes = now.getMinutes(),
        hours = now.getHours();
    
    hours = ((hours > 11 ? hours - 12 : hours) / 12) * 60;
    
    document.querySelector(".clock__hours").dataset.value = hours;
    document.querySelector(".clock__seconds").dataset.value = seconds;
    document.querySelector(".clock__minutes").dataset.value = minutes;
  }
  
  setInterval(ticker, 100);
})();

style.less

.clock {
  position: relative;
  left: 50%;
  margin-left: -200px;
  margin-top: 50px;
  width: 400px;
  height: 400px;
  background: #45484d;
  background: radial-gradient(ellipse at center,  #45484d 0%,#000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 );

  border-radius: 50%;
  
  &:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    margin-top: 188px;
    margin-left: 190px;
    border-radius: 50%;
    border: 2px solid #000;
  }

  .clock--arrow {
    width: 1px;
    height: 1px;
    position: relative;
    top: 200px;
    left: 200px;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  .clock--arrow[data-value] {
    opacity: 1;
  }
  
  .clock--arrow[data-value="0"] {
    transition: none;    
  }
  
  .clock__seconds:before {
      position: absolute;
      content: '';
      margin-top: -180px;
      height: 180px;
      width: 2px;
      background-color: #ff0000;
      box-shadow: rgba(0,0,0,0.5) 0px 0px 2px;
  }
  .clock__minutes:before {
      position: absolute;
      content: '';
      margin-top: -180px;
      height: 180px;
      width: 2px;
      background-color: #fff;
      box-shadow: rgba(0,0,0,0.5) 0px 0px 2px;
  }
  .clock__hours:before {
      position: absolute;
      content: '';
      margin-top: -100px;
      height: 100px;
      width: 4px;
      background-color: #fff;    
      box-shadow: rgba(0,0,0,0.5) 0px 0px 2px;
  }
  
  .clock--arrow_state(@index) when (@index >= 0) {
    @rotation: unit(360/60*@index, deg);
    .clock--arrow[data-value="@{index}"] {
        transform: rotate(@rotation);
    }
    .clock--arrow_state(@index - 1);
  }
  .clock--arrow_state(60);
}