Как сделать часы в css

В CSS без JavaScript нельзя создать функциональные часы, но можно создать статические изображения часов с помощью CSS свойств CSS transform, transition и анимаций.

HTML:

<div class="clock">
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

CSS:

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid #333;
  margin: 50px auto;
}

.hours, .minutes, .seconds {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center bottom;
  transform: translateX(-50%) translateY(-100%);
}

.hours {
  width: 10px;
  height: 60px;
  background-color: #333;
  border-radius: 10px 10px 0 0;
  z-index: 3;
}

.minutes {
  width: 8px;
  height: 80px;
  background-color: #333;
  border-radius: 8px 8px 0 0;
  z-index: 2;
}

.seconds {
  width: 4px;
  height: 100px;
  background-color: red;
  border-radius: 4px 4px 0 0;
  z-index: 1;
}

.hours {
  transition: transform 12s linear;
}

.minutes {
  transition: transform 60s linear;
}

.seconds {
  animation: seconds 1s infinite linear;
}

@keyframes seconds {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

В данном примере мы использовали блочный элемент с позиционированием и вложенные div-элементы, которые играют роль часовой, минутной и секундной стрелки. Мы также установили размеры, цвета и радиусы для каждого div-элемента.

Чтобы часы показывали время, необходимо использовать JavaScript для установки угла поворота каждого div-элемента в соответствии с текущим временем. Однако, мы добавили анимацию поворота для секундной стрелки, используя свойство animation.

Обратите внимание, что этот пример предназначен только для демонстрации возможностей CSS и не является функциональными часами.