画一个圆形的表盘并使用css3动画让表盘的时针、分针、秒针按时间转动起来要求：表盘是圆形的只有整点的刻度即可有时针、分针、秒针页面打开时开始时间是12点整时针、分针、秒针按正确的时间转动只用csshtml美观的表

<div class="clock">
  <div class="face">
    <div class="hand hour"></div>
    <div class="hand minute"></div>
    <div class="hand second"></div>
    <div class="mark mark1"></div>
    <div class="mark mark2"></div>
    <div class="mark mark3"></div>
    <div class="mark mark4"></div>
    <div class="mark mark5"></div>
    <div class="mark mark6"></div>
    <div class="mark mark7"></div>
    <div class="mark mark8"></div>
    <div class="mark mark9"></div>
    <div class="mark mark10"></div>
    <div class="mark mark11"></div>
    <div class="mark mark12"></div>
  </div>
</div>
<style>
.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  margin: 0 auto;
}
.face {
  width: 100%;
  height: 100%;
  position: relative;
}
.hand {
  width: 2px;
  height: 50%;
  background-color: black;
  position: absolute;
  top: 25%;
  left: 50%;
  transform-origin: bottom center;
  transform: rotate(90deg);
  animation: rotate 60s linear infinite;
}
.hour {
  height: 30%;
  width: 4px;
  animation: rotate-hour 43200s linear infinite;
}
.minute {
  height: 40%;
  width: 3px;
  animation: rotate-minute 3600s linear infinite;
}
.second {
  height: 45%;
  width: 2px;
  animation: rotate-second 60s linear infinite;
}
.mark {
  width: 2px;
  height: 10%;
  background-color: black;
  position: absolute;
  top: 5%;
  left: 50%;
  transform-origin: bottom center;
}
.mark1 {
  transform: rotate(30deg);
}
.mark2 {
  transform: rotate(60deg);
}
.mark3 {
  transform: rotate(90deg);
}
.mark4 {
  transform: rotate(120deg);
}
.mark5 {
  transform: rotate(150deg);
}
.mark6 {
  transform: rotate(180deg);
}
.mark7 {
  transform: rotate(210deg);
}
.mark8 {
  transform: rotate(240deg);
}
.mark9 {
  transform: rotate(270deg);
}
.mark10 {
  transform: rotate(300deg);
}
.mark11 {
  transform: rotate(330deg);
}
.mark12 {
  transform: rotate(0deg);
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-hour {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-minute {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-second {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>