jacquesletesson / CSS3clock

CSS3-only working clock

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A CSS3-only working clock

This clock is built using CSS3 only. There are no images used for any part of the clock and no JavaScript is used to "run" it.

The idea came from a friend and I thought it'd be a great little project to test my CSS3 skills, learn something new and create something cool. All dimension and position values are in EMs, which means the clock scales beautifully, and since all animations are CSS the performance is also great. The only thing that CSS/HTML can't do is dynamically set it to the correct time. If that's needed however one could use either JavaScript or server side code (e.g. PHP) to set the initial value to current time and then let CSS handle the rest.

The original code is on CodePen @ http://codepen.io/iliadraznin/pen/JcqbE but I thought I'd put it on GitHub as well, so that if anyone's interested they can easily fork it and use it for their own purposes.

About

CSS3-only working clock