Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Digital Stopwatch

    CSSDeck G+