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

这是一个比较复杂的任务，需要使用HTML、CSS和JavaScript来实现。

首先，我们需要创建一个圆形的表盘。可以使用CSS中的border-radius属性来创建圆形，然后使用CSS中的transform属性来将其旋转到合适的位置。

接下来，我们需要添加刻度和时针、分针、秒针。可以使用CSS中的伪元素::before和::after来创建刻度和指针。需要注意的是，指针需要使用transform-origin属性来设置旋转中心，并使用transform属性来旋转到正确的位置。

最后，我们需要使用JavaScript来获取当前时间，并使用CSS中的animation属性来让时针、分针、秒针按时间转动起来。可以使用setInterval函数每秒钟更新一次指针的位置。

以下是一个示例代码：

HTML:

<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
  <div class="face">
    <div class="mark hour-1"></div>
    <div class="mark hour-2"></div>
    <div class="mark hour-3"></div>
    <div class="mark hour-4"></div>
    <div class="mark hour-5"></div>
    <div class="mark hour-6"></div>
    <div class="mark hour-7"></div>
    <div class="mark hour-8"></div>
    <div class="mark hour-9"></div>
    <div class="mark hour-10"></div>
    <div class="mark hour-11"></div>
    <div class="mark hour-12"></div>
  </div>
</div>

CSS:

.clock {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: white;
  transform: rotate(-90deg);
}

.face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 10px;
  margin-top: -5px;
  margin-left: -2px;
  background-color: black;
  transform-origin: bottom center;
}

.hour-1 {
  transform: rotate(30deg);
}

.hour-2 {
  transform: rotate(60deg);
}

.hour-3 {
  transform: rotate(90deg);
}

.hour-4 {
  transform: rotate(120deg);
}

.hour-5 {
  transform: rotate(150deg);
}

.hour-6 {
  transform: rotate(180deg);
}

.hour-7 {
  transform: rotate(210deg);
}

.hour-8 {
  transform: rotate(240deg);
}

.hour-9 {
  transform: rotate(270deg);
}

.hour-10 {
  transform: rotate(300deg);
}

.hour-11 {
  transform: rotate(330deg);
}

.hour-12 {
  transform: rotate(0deg);
}

.hour-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 40px;
  margin-top: -20px;
  margin-left: -2px;
  background-color: black;
  transform-origin: bottom center;
  animation: hour-hand 43200s linear infinite;
}

.minute-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 60px;
  margin-top: -30px;
  margin-left: -2px;
  background-color: black;
  transform-origin: bottom center;
  animation: minute-hand 3600s linear infinite;
}

.second-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 70px;
  margin-top: -35px;
  margin-left: -1px;
  background-color: red;
  transform-origin: bottom center;
  animation: second-hand 60s linear infinite;
}

@keyframes hour-hand {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes minute-hand {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes second-hand {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

JavaScript:

function updateClock() {
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();
  const hourHand = document.querySelector('.hour-hand');
  const minuteHand = document.querySelector('.minute-hand');
  const secondHand = document.querySelector('.second-hand');
  const hourRotation = (hour * 30) + (minute * 0.5);
  const minuteRotation = (minute * 6) + (second * 0.1);
  const secondRotation = second * 6;
  hourHand.style.transform = `rotate(${hourRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
  secondHand.style.transform = `rotate(${secondRotation}deg)`;
}

setInterval(updateClock, 1000);