01analog-clock.css

.anaclo{
  position: relative;
  width: 80%;
  margin: 0 auto;
}
.anaclo-frame{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  border: 5px solid #444;
  border-radius: 50%;
}
.anaclo-frame::before{
  content: "";
  display: block;
  padding-top: 100%;
}
.anaclo-hand{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: left;
  transform: translateY(-50%);
  background-color: #333;
}
#anaclo-hour{
  width: 25%;
  height: 14px;
}
#anaclo-minute{
  width: 40%;
  height: 9px;
}
#anaclo-second{
  left: 45%;
  transform-origin: 10% 0;
  width: 50%;
  height: 1px;
}
.anaclo-center{
  transform: translate(-50%,-50%);
  width: 3%;
  height: 3%;
  border: 3px solid #333;
  border-radius: 50%;
  background-color: white;
}
.anaclo-num{
  position: absolute;
  height: 1em;
  line-height: 1em;
  font-size: 10vw;
  transform: translate(-50%,-50%);
}
.anaclo-12{
  top: 12%;
  left: 50%;
}
.anaclo-6{
  top: 90%;
  left: 50%;
}
.anaclo-3{
  top: 50%;
  left: 91%;
}
.anaclo-9{
  top: 50%;
  left: 9%;
}
.anaclo-1{
  top: 18%;
  left: 70.5%;
}
.anaclo-7{
  top: 84%;
  left: 29.5%;
}
.anaclo-2{
  top: 32%;
  left: 85%;
}
.anaclo-8{
  top: 70%;
  left: 15%;
}
.anaclo-4{
  top: 70%;
  left: 85%;
}
.anaclo-10{
  top: 32%;
  left: 17.5%;
}
.anaclo-5{
  top: 84%;
  left: 70.5%;
}
.anaclo-11{
  top: 18%;
  left: 30%;
}
.anaclo-dot-outer{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 6vw;
  color: #444;
}
.anaclo-dot{
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.anaclo-dot1{
  transform: rotateZ(30deg);
}
.anaclo-dot2{
  transform: rotateZ(60deg);
}
.anaclo-dot3{
  transform: rotateZ(90deg);
}
.anaclo-dot4{
  transform: rotateZ(120deg);
}
.anaclo-dot5{
  transform: rotateZ(150deg);
}
.anaclo-dot6{
  transform: rotateZ(180deg);
}
.anaclo-dot7{
  transform: rotateZ(210deg);
}
.anaclo-dot8{
  transform: rotateZ(240deg);
}
.anaclo-dot9{
  transform: rotateZ(270deg);
}
.anaclo-dot10{
  transform: rotateZ(300deg);
}
.anaclo-dot11{
  transform: rotateZ(330deg);
}
@media screen and (min-width:769px) {
  .anaclo-num{
    font-size: 85px;
  }
  .anaclo-dot{
    top: 3%;
  }
}

02alalog-clock.html

<div class="anaclo">
  <div class="anaclo-frame"></div>
  <div id="anaclo-hour" class="anaclo-hand"></div>
  <div id="anaclo-minute" class="anaclo-hand"></div>
  <div id="anaclo-second" class="anaclo-hand"></div>
  <div class="anaclo-hand anaclo-center"></div>
  <span class="anaclo-num anaclo-1">1</span>
  <span class="anaclo-num anaclo-2">2</span>
  <span class="anaclo-num anaclo-3">3</span>
  <span class="anaclo-num anaclo-4">4</span>
  <span class="anaclo-num anaclo-5">5</span>
  <span class="anaclo-num anaclo-6">6</span>
  <span class="anaclo-num anaclo-7">7</span>
  <span class="anaclo-num anaclo-8">8</span>
  <span class="anaclo-num anaclo-9">9</span>
  <span class="anaclo-num anaclo-10">10</span>
  <span class="anaclo-num anaclo-11">11</span>
  <span class="anaclo-num anaclo-12">12</span>
  <div class="anaclo-dot-outer anaclo-dot1"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot2"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot3"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot4"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot5"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot6"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot7"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot8"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot9"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot10"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot11"><span class="anaclo-dot">・</span></div>
  <div class="anaclo-dot-outer anaclo-dot12"><span class="anaclo-dot">・</span></div>
</div>

03alalog-clock.js

const hour_hand = document.getElementById('anaclo-hour');
const minute_hand = document.getElementById('anaclo-minute');
const second_hand = document.getElementById('anaclo-second');
move_clock(true);

function move_clock(ini){
  const date = new Date();
  const second = ( 360 * date.getSeconds() / 60 );
  second_hand.style.transform = `translateY(-50%) rotateZ(${second-90}deg)`;
  if(ini||second === 0){
    const minute = ( 360 * date.getMinutes() / 60);
    minute_hand.style.transform = `translateY(-50%) rotateZ(${minute-90}deg)`;
    const hour = ( 360 * (date.getHours()*60 + date.getMinutes()) / (60*12) );
    hour_hand.style.transform = `translateY(-50%) rotateZ(${hour-90}deg)`;
  }
  if(ini){
    setInterval(()=>{
      move_clock(false);
    },1000);
  }
}