Script ceas analogic

 <div class="clock">

  <div class="hour">

    <div class="hr" id="hr"></div>

  </div>

  <div class="min">

    <div class="mn" id="mn"></div>

  </div>

  <div class="sec">

    <div class="sc" id="sc"></div>

  </div>

</div>

<style>

.clock {

  width: 280px;

  height: 280px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: url(https://lokeshpareek-mob.github.io/img/clock.png);

  background-size: cover;

}

.clock:before {

  content: "";

  position: absolute;

  width: 15px;

  height: 15px;

  background: #fff;

  border-radius: 50%;

  z-index: 10000;

}

.clock .hour,

.clock .min,

.clock .sec {

  position: absolute;

}

.clock .hour,

.hr {

  width: 160px;

  height: 160px;

}

.clock .min,

.mn {

  width: 190px;

  height: 190px;

}

.clock .sec,

.sc {

  width: 230px;

  height: 230px;

}

.hr,

.mn,

.sc {

  display: flex;

  justify-content: center;

  /* align-items: center; */

  position: absolute;

  border-radius: 50%;

}

.hr:before {

  content: "";

  position: absolute;

  width: 6px;

  height: 80px;

  background: #bb86fc;

  z-index: 10;

  border-radius: 6px 6px 0 0;

}

.mn:before {

  content: "";

  position: absolute;

  width: 4px;

  height: 90px;

  background: #fff;

  z-index: 11;

  border-radius: 6px 6px 0 0;

}

.sc:before {

  content: "";

  position: absolute;

  width: 2px;

  height: 150px;

  background: #70efde;

  z-index: 12;

  border-radius: 6px 6px 0 0;

}

</style>

<script>

const deg = 6;

const hr = document.querySelector("#hr");

const mn = document.querySelector("#mn");

const sc = document.querySelector("#sc");

setInterval(() => {

  let day = new Date();

  let ms = day.getMilliseconds() * deg;

  let hh = day.getHours() * 30;

  let mm = day.getMinutes() * deg;

  let ss = day.getSeconds() * deg + ms / 1000;

  hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;

  mn.style.transform = `rotateZ(${mm}deg)`;

  sc.style.transform = `rotateZ(${ss}deg)`;

}, 1);

</script>