.clock {
  width: 200px;
  height: 200px;
  background-image: url(./钟表.jpeg);
  background-size: cover;
  margin: 100px auto;
  position: relative;
}

.clock>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.hh-wrapper {
  width: 40%;
  height: 40%;
  /* animation: run 43200s steps(43200) infinite backwards; */
}

.hh {
  height: 50%;
  width: 2px;
  margin: 0 auto;
  background-color: #000;
}

.mh-wrapper {
  width: 50%;
  height: 50%;
  /* animation: run 3600s steps(3600) infinite; */
}

.mh {
  height: 50%;
  width: 1.5px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .6);
}

.sh-wrapper {
  width: 60%;
  height: 60%;
  /* animation: run 60s steps(60) infinite; */
}

.sh {
  height: 50%;
  width: 1px;
  margin: 0 auto;
  background-color: #424242;
}

@keyframes run {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}