CSS3 Creative Round Pointer Clock jQuery Special Effect Code

 < link  href = ' http://fonts.googleapis.com/css?family=Comfortaa:700 '  rel = 'stylesheet'  type = 'text/css' >

 < script  type = "text/javascript"  src = "js/jquery-1.7.2.min.js" >< / script >

 < div  id = "clock" >

   < div  id = "hour"  style = "transform: rotate(56deg);" >< img  src = "hour.png" >< / div >

   < div  id = "minute"  style = "transform: rotate(312deg);" >< img  src = "minute.png" >< / div >

   < div  id = "second"  style = "transform: rotate(6deg);" >< img  src = "second.png" >< / div >

 < / div >

 < script  type = "text/javascript"  src = "js/jquery-1.7.2.min.js" >< / script > 

 < script  type = "text/javascript" > function Clock_dg(prop) {

 var angle = 360/60,

 date = new Date();

 var h = date.getHours();

 if(h > 12) {

 h = h - 12;

 }

 hour = h;

 minute = date.getMinutes(),

 second = date.getSeconds(),

 hourAngle = (360/12) * hour + (360/(12*60)) * minute;

 $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';

 $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';

 $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';

 $('#clock').addClass('clock'+h);

 }

 $(function(){

 var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),

 prop,

 el = document.createElement('div');

 for(var i = 0, l = props.length; i < l;  i++ )  {

 if ( typeof el. style [ props [ i ] ] ! ==  "undefined" )  {

 prop = props [ i ] ;

 break;

         }

     }

 setInterval ( function ( ) {

 Clock_dg ( prop )

     } , one hundred ) ;

 } ) ;

 < / script >

 < div  style = "text-align:center; margin:-80px 0; font:normal 14px/24px 'MicroSoft YaHei'; " >

 < / div >