CSS3 动画实现动态圆形时钟 - HTML、CSS 和 JavaScript 代码示例

这是一个比较复杂的任务，需要使用 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);