CSS animation clock

      The below shown clock is fully designed using pure css and jQuery and I am using  4 images for anination (Clock numbers and shape, hour, minutes, seconds).

   Positions, z-index value and background images are set using CSS, z-index value is used to set the priority of the image (back or top). CSS background property is used to set the background color or the image.

z-index:-

z-index:1; //which index value is high that will appear in top.

background:-

background:url(samp/sample.jpg); //Set the background image
                      or
background:red;  //Set background color

The Real Time css animated clock

Advertisement

Screen Shot