使用css画个钟表的时间刻度

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

.clock::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Ensure the center dot is on top */
}

.marker {
  position: absolute;
  width: 2px;
  height: 10px; /* Adjust length for hour markers */
  background-color: black;
  top: 50%;
  left: 50%;
  transform-origin: bottom center; /* Rotate around the bottom center */
}

.marker.hour {
    height: 10px;
}

.marker.minute {
    height: 5px; /* Shorter for minute markers */
}


/* Generate hour markers (every 30 degrees) */
.marker:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.marker:nth-child(2) { transform: translate(-50%, -100%) rotate(30deg); }
.marker:nth-child(3) { transform: translate(-50%, -100%) rotate(60deg); }
.marker:nth-child(4) { transform: translate(-50%, -100%) rotate(90deg); }
.marker:nth-child(5) { transform: translate(-50%, -100%) rotate(120deg); }
.marker:nth-child(6) { transform: translate(-50%, -100%) rotate(150deg); }
.marker:nth-child(7) { transform: translate(-50%, -100%) rotate(180deg); }
.marker:nth-child(8) { transform: translate(-50%, -100%) rotate(210deg); }
.marker:nth-child(9) { transform: translate(-50%, -100%) rotate(240deg); }
.marker:nth-child(10) { transform: translate(-50%, -100%) rotate(270deg); }
.marker:nth-child(11) { transform: translate(-50%, -100%) rotate(300deg); }
.marker:nth-child(12) { transform: translate(-50%, -100%) rotate(330deg); }

/* Minute markers, slightly shorter and every 6 degrees.  Comment out if only hour markers are needed. */
.marker.minute:nth-child(n+13) {
    height: 5px;
}

/*  This is a bit tricky to generate dynamically with just CSS. A loop in JavaScript would be more efficient.  This example shows the first few minute markers after the 12 hour markers. Adjust as needed. */
.marker:nth-child(13) { transform: translate(-50%, -100%) rotate(6deg); }
.marker:nth-child(14) { transform: translate(-50%, -100%) rotate(12deg); }
.marker:nth-child(15) { transform: translate(-50%, -100%) rotate(18deg); }
/* ... and so on up to 60 ... */

<div class="clock">
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>
    <div class="marker hour"></div>

    <!-- Minute Markers - Comment out if only hour markers are needed -->