CSS Spinning Clock (Punchy)

css-spinning-clock-punchy.markdown

CSS Spinning Clock (Punchy)

Yet another LESS CSS animated Clock.

A Pen by Kai on CodePen.

License.

index.html

<div class="container">
<div class="inner-container">
<div class="clock"></div>
<div class="tail"></div>
</div>
</div>

style.less

// Variables
@clock_r: 66px;
@clock_line: 8px;
@clock_t: 1000ms;
@line_color: #F9EAD6;
@bg_color: #E85524;
// ---------------------

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.container {
  width: 240px;
  height: 240px;
  background-color: @bg_color;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inner-container {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-top: 17px;
}

.tail {
  border-left: @clock_line solid;
  width: @clock_r * 2;
  height: @clock_r / 2;
  color: @line_color;
}

.clock {
  width: @clock_r * 2;
  height: @clock_r * 2;
  // box-shadow: inset 0px 0px 0px @clock_line @clock_color;
  border: @clock_line  solid; //@clock_color
  position: relative;
  color: @line_color;
  
  &:after, &:before {
    position: absolute;
    content: "";
    transform-origin: (@clock_line / 2) (@clock_line / 2);
    height: @clock_line;
    top: @clock_r - (@clock_line / 2);
    left: @clock_r - (@clock_line / 2);    
    background-color: blue;
  }
  
  &:before {
    width: @clock_r * (5  / 6) * 1.65;
    animation: spin @clock_t linear infinite;
    background-color: @line_color;
  }
  
  &:after {
    width: @clock_r * (2 / 3) * 1.3;    
    animation: spin (@clock_t * 4) linear infinite;   
    background-color: @line_color;
  }
}