Description
Inspired by the clock widgets present on most smartphones, I challenged myself to create a simple online clock.
I loved creating this tiny toy - its simple scope provided a great opportunity to experiment further with two of my favourite tools, CSS3 animations and javascript powered templating.
Features
- Clock hands are animated using CSS3 animations.
- Javascript sets the current time - and, since CSS animations pause when a window loses focus, maintains its accuracy.
- On page load or focus, mustache templating is used to generate a stylesheet that positions each hand and sets it in motion.
Design
