.container
  .intro
    p a nearly pure CSS watch implementation that just requires JavaScript to initiate hand positions
  .watch-case
    .watch
      .watch__face
        .watch-seconds
          .watch-seconds__hand
        .watch-minutes
          .watch-minutes__hand
        .watch-hours
          .watch-hours__hand
      .watch__strap
      .watch__dial
View Compiled
*
  box-sizing border-box

body
  background-color #e74c3c
  color            #fafafa
  text-align       center
  
.watch-case
  position relative
  height 300px
  width  300px
  margin 0 auto

$ns      = watch
$seconds = watch-seconds
$minutes = watch-minutes
$hours   = watch-hours
$handMod = hand

$clockSize = 200px

getPosition(angle)
  $layoutRadius = ($clockSize / 2) - 15
  xPos = $layoutRadius * cos(angle * (PI / 180))
  yPos = $layoutRadius * sin(angle * (PI / 180))
  (xPos yPos)

genShadows()
  $shadows = ()
  for $indicator in (1..12)
    $angle       = (360 / 12) * ($indicator - 1)
    $xy          = getPosition($angle)
    $dots        = $numberOfDots
    $scale       = 0
    if $indicator == 1 || $indicator == 4 || $indicator == 7 || $indicator == 10
      $scale = 2px
    $shadowProps = $xy 0 $scale grey
    push($shadows, join(' ', $shadowProps))
  (unquote(join(',', $shadows)))

.{$ns}
  height   $clockSize
  width    $clockSize
  position absolute
  top      50%
  left     50%
  margin-left -($clockSize / 2)
  margin-top  -($clockSize / 2)

  &__face
    &:before
      content ''
      height 4px
      width 4px
      display block
      position absolute
      top 50%
      left 50%
      border-radius 4px
      margin-left -2px
      margin-top -2px
      background-color blue
      box-shadow genShadows()

    height 100%
    width  100%
    border-radius $clockSize
    background-color #fafafa
    border 8px solid #111

  &__dial
    position absolute
    left 100%
    background-color grey
    height 40px
    width 20px
    top 50%
    margin-top -20px
    margin-left -10px
    z-index -1

  &__strap
    position absolute
    width 50%
    height 150%
    background-color #000
    top 50%
    left 50%
    margin-left -25%
    margin-top -75%
    z-index -1

  for $second in (0..59)
    &[start-seconds=\"{$second}\"]
      .{$seconds}
        transform rotate(((360 / 60) * $second)deg)
      if $second > 0
        $offset = 60 - $second
        .{$minutes}__{$handMod}
          animation-delay ($offset * 1s)
    $minute = $second
    if $minute > 0
      $minute = $minute + 1
    &[start-minutes=\"{$second}\"]
      .{$minutes}
        transform rotate(((360 / 60) * $minute)deg)
      for $hour in (0..12)
        &[start-hours=\"{$hour}\"]
          $hourOffset = (360 / 12) * $hour
          $minuteOffset = (360 / 12 / 60) * $minute
          .{$hours}
            transform rotate(($hourOffset + $minuteOffset) * 1deg)

.{$seconds}
.{$minutes}
.{$hours}
  display block
  position absolute
  top 0
  left 0
  height  100%
  width   100%

  &__{$handMod}
    position absolute
    display block
    height  (($clockSize / 2) - 20)
    width   8px
    left 50%
    top 50%
    margin-left -4px
    transform-origin bottom center
    margin-top -(($clockSize / 2) - 20)
    background-color #000
    border-radius 5px 5px 5px 5px

    &:before
      background-color #000
      content ''
      position absolute
      bottom -8px
      left 50%
      height 16px
      width  16px
      margin-left -8px
      border-radius 100%




.{$seconds}
  z-index 3

  &__{$handMod}
    background-color red
    width 2px
    margin-left -1px
    &:before
      background-color red
      content ''
      position absolute
      bottom -5px
      left 50%
      height 10px
      width  10px
      margin-left -5px
      border-radius 100%
    /* A full rotation will be 1 minute */
    animation rotate (1 * 60s) linear infinite

.{$minutes}
  z-index 2

  &__{$handMod}
    /* A full rotation will be 60 minutes */
    animation rotate (60 * 60s) steps(60) infinite

.{$hours}
  z-index 1
  &__{$handMod}
    height (($clockSize / 2) - 40)
    margin-top -(($clockSize / 2) - 40)
    /* A full rotation is 720 minutes */
    animation rotate (720 * 60s) infinite linear

@keyframes rotate
  from
    transform rotate(0deg)
  to
    transform rotate(360deg)

p
  background-color #fafafa
  color grey
  display inline-block
  padding 10px
  border-radius 10px
  border 4px solid grey
View Compiled
;(function(){
  const watch = document.querySelector('.watch');
  const d = new Date();
  watch.setAttribute('start-seconds', d.getSeconds());
  watch.setAttribute('start-minutes', d.getMinutes());
  watch.setAttribute('start-hours'  , (d.getHours() > 11) ? d.getHours() - 12 : d.getHours());
})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.