css画钟表_运用css3绘制时钟。

好的，下面是使用 CSS3 绘制时钟的代码：

HTML：

<div class="clock">
  <div class="hour hand"></div>
  <div class="minute hand"></div>
  <div class="second hand"></div>
  <div class="center"></div>
</div>

CSS：

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 4px;
}

.hour {
  width: 8px;
  height: 50px;
  background-color: #000;
  transform: rotate(30deg);
}

.minute {
  width: 6px;
  height: 70px;
  background-color: #000;
  transform: rotate(45deg);
}

.second {
  width: 4px;
  height: 90px;
  background-color: #f00;
  transform: rotate(60deg);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
  transform: translate(-50%, -50%);
}

这是一个简单的时钟，其中有三个指针：时针、分针和秒针。它们都是通过 CSS3 中的 `transform` 属性来旋转，而中心点则是通过 `transform-origin` 属性来设置的。