• 1
  • 2
Home > Tips

CSS3 Clock Free Download

A clock in a website is a kind of useful and funny web app. Now I want to share you with a CSS3 clock. As usual, the clock is designed by pure css and html code. You can free download this css3 clock and edit for your own use.

 

 
                                  

 

The initialization time of this CSS3 clock is 12:00 and it will start to tick after you open this html file. The circle of the CSS3 clock is made by using border-radius ,  the point in the center is made by using :before and the shadow is made by using :after.

 

 

 CSS Code of CSS3 Clock

 

 #clock {
 position: relative;
 width: 120px;
 height: 120px;
 background: #96d2d0;
 margin: 50px auto 0;
 border: 10px solid #fff;
 
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
}

#clock:after {
 content: '';
 position: absolute;
 bottom: -7px;
 width: 120px;
 left: 0;
 height: 0px;
 
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 
 -webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
 box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
 
 z-index: -1;
}

#clock:before {
 content: '';
 position: absolute;
 z-index: 2;
 width: 8px;
 height: 8px;
 background: #333;
 left: 50%;
 top: 50%;
 margin: -4px 0 0 -4px;
 
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
}

/* Hands */
#clock span.hand {
 background: #555;
 position: absolute;
 left: 50%;
 -webkit-animation: rotate 60s infinite linear;
 -webkit-transform-origin: left bottom;
 -moz-animation: rotate 60s infinite linear;
 -moz-transform-origin: left bottom;
 -ms-animation: rotate 60s infinite linear;
 -ms-transform-origin: left bottom;
 -o-animation: rotate 60s infinite linear;
 -o-transform-origin: left bottom;
 animation: rotate 60s infinite linear;
 transform-origin: left bottom;
}

#clock span.hand.second {
 height: 50px;
 width: 2px; 
 margin-left: -1px;
 top: 10px;
}

#clock span.hand.minute {
 height: 40px;
 width: 4px; 
 margin-left: -2px;
 top: 20px;
 -webkit-animation-duration: 3600s;
 -moz-animation-duration: 3600s;
 -ms-animation-duration: 3600s;
 -o-animation-duration: 3600s;
 animation-duration: 3600s;
}

#clock span.hand.hour {
 height: 30px;
 width: 6px; 
 margin-left: -3px;
 top: 30px;
 -webkit-animation-duration: 43200s;
 -moz-animation-duration: 43200s;
 -ms-animation-duration: 43200s;
 -o-animation-duration: 43200s;
 animation-duration: 43200s;
}

@-webkit-keyframes rotate {
 0% { -webkit-transform: rotate(0deg);}
 100% { -webkit-transform: rotate(360deg);}

@-moz-keyframes rotate {
 0% { -moz-transform: rotate(0deg);}
 100% { -moz-transform: rotate(360deg);}

@-ms-keyframes rotate {
 0% { -ms-transform: rotate(0deg);}
 100% { -ms-transform: rotate(360deg);}

@-o-keyframes rotate {
 0% { -o-transform: rotate(0deg);}
 100% { -o-transform: rotate(360deg);}

@keyframes rotate {
 0% { transform: rotate(0deg);}
 100% { transform: rotate(360deg);}

 

 

 Terms of Use

This template is created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the template and then edit it for their own use. If you are interested in this template, please feel free to download it. If you have problem understanding or editing the template, please feel free to contact our support team (support@slicemaker.com) for help. 

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0