style.css

*{margin:0;border:0;
  box-sizing:border-box;
 
}
.skin{
  display:flex;
  width:350px;
  height:350px;
  justify-content:center;
  align-items:center;
  background:radial-gradient(#7c7472,#c4bdb2);
  box-shadow:inset 0px 0px 1em #7c7472; 
}

.clock{
  width:200px;
  height:200px;
  border-radius:50%;
  margin:0 auto;
  position:relative;
  background:#f0f1e9;
  box-shadow: 0 10px 10px #453a3b;
}
.clock::after{
  width:120px;
  height:120px;  
  border-radius:50%;
  top:40px;
  left:40px;
  position:absolute;
  background:radial-gradient(white,#eeefe6);
  content:'';
  box-shadow:inset 0px 0px 1px #f2f3e9;
}
.clock>.dot{
  width:14px;
  height:14px;  
  border-radius:50%;
  top:93px;
  left:93px;
  position:absolute;
  content:'';
  background: radial-gradient(circle at 1px 1px, white, #bdb6ac);
  box-shadow:inset 0px 0px 9px #ccc;
  

}
.shuzi12{
  display:block; 
  position:absolute;
  top:5px;
  left:86px;
  font-size:24px;  
}
.shuzi3{
  display:block; 
  position:absolute;
  top:84px;
  right:5px;
  font-size:24px;  
}
.shuzi6{
  display:block; 
  position:absolute;
  bottom:5px;
  left:93px;
  font-size:24px;  
}
.shuzi9{
  display:block; 
  position:absolute;
  top:83px;
  left:5px;
  font-size:24px;  
}
.clock>div{
 
  position:absolute;  
  transform-origin: 0 0;
  z-index:2;
  box-shadow: 0 4px 4px #dcddd1;
}

.clock>.secondHand{
   background:red;
   border:0px solid tarnsparent;
   border-radius:100px;
   width:80px;   
   height:2px;
   top:99px;
   left:78px;
   transform-origin:22px 1px ;
}

.clock>.hourHand{
   background:#68645b;
   border:0px solid tarnsparent;
   border-radius:6px;
   width:60px;   
   height:6px;
   top:97px;
   left:87px;
   transform-origin:13px 3px ;
   
}


.clock>.minuteHand{
      background:#68645b;
   border:0px solid tarnsparent;
   border-radius:6px;
   width:70px;   
   height:4.8px;
   top:97.6px;
   left:87px;
   transform-origin:13px 2.4px ;
   
}