CSS3 Digital Stopwatch
Pure CSS3 Digital Stopwatch made by ksk1015. This stopwatch consists of 4 cirlcles with numbers from 0 to 9 on them. These four circles indicate hours, minutes, seconds and 10th part of a second. There's a main viewport where the stopwatch timer will be shown. To view the circles, click on "Skeleton".
The circles are rotated using the animation
and keyframes
properties so that the partictular number is shown in the viewport to render the time. The rotation speed is set by giving each circle it's own animation-duration
time which are 1s, 10s, 100s, 1000s respectively. The start/stop/reset buttons are basically three radio input
elements with different ids. Check out the code to see how it works and how the circles are given different animations.