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