Javascript Clock | CSS Neumorphism Working Analog Clock UI Design

md.shakil hossain

1751

 <div class='clock'>
  <div class='sh-0' id='second-hand'></div>
  <div class='mh-51' id='minute-hand'></div>
  <div class='hh-2' id='hour-hand'></div>
  <span class='ticks'>
    <span class='tick-1'></span>
    <span class='tick-2'></span>
    <span class='tick-3'></span>
    <span class='tick-4'></span>
    <span class='tick-5'></span>
    <span class='tick-6'></span>
    <span class='tick-7'></span>
    <span class='tick-8'></span>
    <span class='tick-9'></span>
    <span class='tick-10'></span>
    <span class='tick-11'></span>
    <span class='tick-12'></span>
    <span class='tick-13'></span>
    <span class='tick-14'></span>
    <span class='tick-15'></span>
    <span class='tick-16'></span>
    <span class='tick-17'></span>
    <span class='tick-18'></span>
    <span class='tick-19'></span>
    <span class='tick-20'></span>
    <span class='tick-21'></span>
    <span class='tick-22'></span>
    <span class='tick-23'></span>
    <span class='tick-24'></span>
    <span class='tick-25'></span>
    <span class='tick-26'></span>
    <span class='tick-27'></span>
    <span class='tick-28'></span>
    <span class='tick-29'></span>
    <span class='tick-30'></span>
    <span class='tick-31'></span>
    <span class='tick-32'></span>
    <span class='tick-33'></span>
    <span class='tick-34'></span>
    <span class='tick-35'></span>
    <span class='tick-36'></span>
    <span class='tick-37'></span>
    <span class='tick-38'></span>
    <span class='tick-39'></span>
    <span class='tick-40'></span>
    <span class='tick-41'></span>
    <span class='tick-42'></span>
    <span class='tick-43'></span>
    <span class='tick-44'></span>
    <span class='tick-45'></span>
    <span class='tick-46'></span>
    <span class='tick-47'></span>
    <span class='tick-48'></span>
    <span class='tick-49'></span>
    <span class='tick-50'></span>
    <span class='tick-51'></span>
    <span class='tick-52'></span>
    <span class='tick-53'></span>
    <span class='tick-54'></span>
    <span class='tick-55'></span>
    <span class='tick-56'></span>
    <span class='tick-57'></span>
    <span class='tick-58'></span>
    <span class='tick-59'></span>
    <span class='tick-60'></span>
  </span>
</div>

Try it Yourself >>

 .clock {
  width: 260px;
  height: 260px;
  background: #222;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.clock div {
  position: absolute;
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
.clock::after {
  position: absolute;
  content: '';
  width: 12px;
  padding-bottom: 12px;
  background-color: white;
  border-radius: 50%;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  z-index: 999;
}
.clock #second-hand {
  height: 45%;
  top: 50%;
  left: calc(50% - 1px);
  z-index: 1;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-radius: 0 0 1px 1px;
}
.clock #minute-hand {
  height: 40%;
  top: 50%;
  left: calc(50% - 2px);
  z-index: 1;
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-radius: 0 0 2px 2px;
}
.clock #hour-hand {
  height: 30%;
  top: 50%;
  left: calc(50% - 3px);
  z-index: 1;
  border-left: 3px solid white;
  border-right: 3px solid white;
  border-radius: 0 0 3px 3px;
}
.clock .ticks span {
  position: absolute;
  display: block;
  height: 2px;
  width: 12px;
  background: #444;
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  left: calc(50% - 6px);
  top: 50%;
}
.clock .ticks span:nth-child(1) {
  -webkit-transform: rotate(6deg) translateX(118px);
      -ms-transform: rotate(6deg) translateX(118px);
          transform: rotate(6deg) translateX(118px);
}
.clock .ticks span:nth-child(2) {
  -webkit-transform: rotate(12deg) translateX(118px);
      -ms-transform: rotate(12deg) translateX(118px);
          transform: rotate(12deg) translateX(118px);
}
.clock .ticks span:nth-child(3) {
  -webkit-transform: rotate(18deg) translateX(118px);
      -ms-transform: rotate(18deg) translateX(118px);
          transform: rotate(18deg) translateX(118px);
}
.clock .ticks span:nth-child(4) {
  -webkit-transform: rotate(24deg) translateX(118px);
      -ms-transform: rotate(24deg) translateX(118px);
          transform: rotate(24deg) translateX(118px);
}
.clock .ticks span:nth-child(5) {
  -webkit-transform: rotate(30deg) translateX(118px);
      -ms-transform: rotate(30deg) translateX(118px);
          transform: rotate(30deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(6) {
  -webkit-transform: rotate(36deg) translateX(118px);
      -ms-transform: rotate(36deg) translateX(118px);
          transform: rotate(36deg) translateX(118px);
}
.clock .ticks span:nth-child(7) {
  -webkit-transform: rotate(42deg) translateX(118px);
      -ms-transform: rotate(42deg) translateX(118px);
          transform: rotate(42deg) translateX(118px);
}
.clock .ticks span:nth-child(8) {
  -webkit-transform: rotate(48deg) translateX(118px);
      -ms-transform: rotate(48deg) translateX(118px);
          transform: rotate(48deg) translateX(118px);
}
.clock .ticks span:nth-child(9) {
  -webkit-transform: rotate(54deg) translateX(118px);
      -ms-transform: rotate(54deg) translateX(118px);
          transform: rotate(54deg) translateX(118px);
}
.clock .ticks span:nth-child(10) {
  -webkit-transform: rotate(60deg) translateX(118px);
      -ms-transform: rotate(60deg) translateX(118px);
          transform: rotate(60deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(11) {
  -webkit-transform: rotate(66deg) translateX(118px);
      -ms-transform: rotate(66deg) translateX(118px);
          transform: rotate(66deg) translateX(118px);
}
.clock .ticks span:nth-child(12) {
  -webkit-transform: rotate(72deg) translateX(118px);
      -ms-transform: rotate(72deg) translateX(118px);
          transform: rotate(72deg) translateX(118px);
}
.clock .ticks span:nth-child(13) {
  -webkit-transform: rotate(78deg) translateX(118px);
      -ms-transform: rotate(78deg) translateX(118px);
          transform: rotate(78deg) translateX(118px);
}
.clock .ticks span:nth-child(14) {
  -webkit-transform: rotate(84deg) translateX(118px);
      -ms-transform: rotate(84deg) translateX(118px);
          transform: rotate(84deg) translateX(118px);
}
.clock .ticks span:nth-child(15) {
  -webkit-transform: rotate(90deg) translateX(118px);
      -ms-transform: rotate(90deg) translateX(118px);
          transform: rotate(90deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(16) {
  -webkit-transform: rotate(96deg) translateX(118px);
      -ms-transform: rotate(96deg) translateX(118px);
          transform: rotate(96deg) translateX(118px);
}
.clock .ticks span:nth-child(17) {
  -webkit-transform: rotate(102deg) translateX(118px);
      -ms-transform: rotate(102deg) translateX(118px);
          transform: rotate(102deg) translateX(118px);
}
.clock .ticks span:nth-child(18) {
  -webkit-transform: rotate(108deg) translateX(118px);
      -ms-transform: rotate(108deg) translateX(118px);
          transform: rotate(108deg) translateX(118px);
}
.clock .ticks span:nth-child(19) {
  -webkit-transform: rotate(114deg) translateX(118px);
      -ms-transform: rotate(114deg) translateX(118px);
          transform: rotate(114deg) translateX(118px);
}
.clock .ticks span:nth-child(20) {
  -webkit-transform: rotate(120deg) translateX(118px);
      -ms-transform: rotate(120deg) translateX(118px);
          transform: rotate(120deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(21) {
  -webkit-transform: rotate(126.0deg) translateX(118px);
      -ms-transform: rotate(126.0deg) translateX(118px);
          transform: rotate(126.0deg) translateX(118px);
}
.clock .ticks span:nth-child(22) {
  -webkit-transform: rotate(132deg) translateX(118px);
      -ms-transform: rotate(132deg) translateX(118px);
          transform: rotate(132deg) translateX(118px);
}
.clock .ticks span:nth-child(23) {
  -webkit-transform: rotate(138deg) translateX(118px);
      -ms-transform: rotate(138deg) translateX(118px);
          transform: rotate(138deg) translateX(118px);
}
.clock .ticks span:nth-child(24) {
  -webkit-transform: rotate(144deg) translateX(118px);
      -ms-transform: rotate(144deg) translateX(118px);
          transform: rotate(144deg) translateX(118px);
}
.clock .ticks span:nth-child(25) {
  -webkit-transform: rotate(150deg) translateX(118px);
      -ms-transform: rotate(150deg) translateX(118px);
          transform: rotate(150deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(26) {
  -webkit-transform: rotate(156deg) translateX(118px);
      -ms-transform: rotate(156deg) translateX(118px);
          transform: rotate(156deg) translateX(118px);
}
.clock .ticks span:nth-child(27) {
  -webkit-transform: rotate(162deg) translateX(118px);
      -ms-transform: rotate(162deg) translateX(118px);
          transform: rotate(162deg) translateX(118px);
}
.clock .ticks span:nth-child(28) {
  -webkit-transform: rotate(168deg) translateX(118px);
      -ms-transform: rotate(168deg) translateX(118px);
          transform: rotate(168deg) translateX(118px);
}
.clock .ticks span:nth-child(29) {
  -webkit-transform: rotate(174deg) translateX(118px);
      -ms-transform: rotate(174deg) translateX(118px);
          transform: rotate(174deg) translateX(118px);
}
.clock .ticks span:nth-child(30) {
  -webkit-transform: rotate(180deg) translateX(118px);
      -ms-transform: rotate(180deg) translateX(118px);
          transform: rotate(180deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(31) {
  -webkit-transform: rotate(186.0deg) translateX(118px);
      -ms-transform: rotate(186.0deg) translateX(118px);
          transform: rotate(186.0deg) translateX(118px);
}
.clock .ticks span:nth-child(32) {
  -webkit-transform: rotate(192deg) translateX(118px);
      -ms-transform: rotate(192deg) translateX(118px);
          transform: rotate(192deg) translateX(118px);
}
.clock .ticks span:nth-child(33) {
  -webkit-transform: rotate(198.0deg) translateX(118px);
      -ms-transform: rotate(198.0deg) translateX(118px);
          transform: rotate(198.0deg) translateX(118px);
}
.clock .ticks span:nth-child(34) {
  -webkit-transform: rotate(204deg) translateX(118px);
      -ms-transform: rotate(204deg) translateX(118px);
          transform: rotate(204deg) translateX(118px);
}
.clock .ticks span:nth-child(35) {
  -webkit-transform: rotate(210deg) translateX(118px);
      -ms-transform: rotate(210deg) translateX(118px);
          transform: rotate(210deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(36) {
  -webkit-transform: rotate(216deg) translateX(118px);
      -ms-transform: rotate(216deg) translateX(118px);
          transform: rotate(216deg) translateX(118px);
}
.clock .ticks span:nth-child(37) {
  -webkit-transform: rotate(222deg) translateX(118px);
      -ms-transform: rotate(222deg) translateX(118px);
          transform: rotate(222deg) translateX(118px);
}
.clock .ticks span:nth-child(38) {
  -webkit-transform: rotate(228deg) translateX(118px);
      -ms-transform: rotate(228deg) translateX(118px);
          transform: rotate(228deg) translateX(118px);
}
.clock .ticks span:nth-child(39) {
  -webkit-transform: rotate(234deg) translateX(118px);
      -ms-transform: rotate(234deg) translateX(118px);
          transform: rotate(234deg) translateX(118px);
}
.clock .ticks span:nth-child(40) {
  -webkit-transform: rotate(240deg) translateX(118px);
      -ms-transform: rotate(240deg) translateX(118px);
          transform: rotate(240deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(41) {
  -webkit-transform: rotate(246deg) translateX(118px);
      -ms-transform: rotate(246deg) translateX(118px);
          transform: rotate(246deg) translateX(118px);
}
.clock .ticks span:nth-child(42) {
  -webkit-transform: rotate(252.0deg) translateX(118px);
      -ms-transform: rotate(252.0deg) translateX(118px);
          transform: rotate(252.0deg) translateX(1

Try it Yourself >>

// adding initial time classnames on load. css handles the timing.
var time = new Date(),
    hours = time.getHours(),
    minutes = time.getMinutes(),
    seconds = time.getSeconds();

document.getElementById("second-hand").className = "sh-" + seconds;
document.getElementById("minute-hand").className = "mh-" + minutes;
document.getElementById("hour-hand").className = "hh-" + hours;

Try it Yourself >>