纯css实现苹果表盘动画

可以使用CSS的`transform`和`transition`属性来实现苹果表盘动画。

首先，需要将表盘的每个数字和指针都用`<div>`元素来表示，并设置好对应的样式。

然后，使用`transform: rotate()`将每个数字和指针旋转到对应的位置。同时，使用`transition`属性来设置动画的过渡效果。

最后，使用JavaScript来控制表盘指针的旋转，从而实现动态的表盘动画效果。

以下是一个基本的示例代码：

HTML：

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

CSS：

.watch {
  position: relative;
  width: 200px;
  height: 200px;
  border: 10px solid #000;
  border-radius: 50%;
  margin: 50px auto;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
}

.number {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
}

.number-1 {
  top: 20px;
  left: 90px;
}

.number-2 {
  top: 40px;
  left: 140px;
}

.number-3 {
  top: 90px;
  left: 170px;
}

.number-4 {
  top: 140px;
  left: 140px;
}

.number-5 {
  top: 160px;
  left: 90px;
}

.number-6 {
  bottom: 20px;
  left: 90px;
}

.number-7 {
  bottom: 20px;
  left: 40px;
}

.number-8 {
  top: 160px;
  left: 10px;
}

.number-9 {
  top: 90px;
  left: 0;
}

.number-10 {
  top: 40px;
  left: 10px;
}

.number-11 {
  top: 20px;
  left: 40px;
}

.number-12 {
  top: 70px;
  left: 90px;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  width: 2px;
  height: 60px;
  background: #000;
  left: 99px;
  top: 70px;
  transform-origin: bottom center;
  transition: all .5s ease-in-out;
}

.hour-hand {
  height: 50px;
}

.minute-hand {
  height: 70px;
}

.second-hand {
  height: 80px;
  background: red;
}

/* 旋转每个数字到对应的位置 */
.number {
  transform: rotate(30deg);
}

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript:

function setClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secondHand = document.querySelector('.second-hand');
  const minuteHand = document.querySelector('.minute-hand');
  const hourHand = document.querySelector('.hour-hand');

  const secondDegrees = ((seconds / 60) * 360) + 90;
  const minuteDegrees = ((minutes / 60) * 360) + 90;
  const hourDegrees = ((hours / 12) * 360) + 90;

  secondHand.style.transform = `rotate(${secondDegrees}deg)`;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setClock, 1000);

这段代码实现了一个简单的时钟表盘动画，可以根据实际需求进行修改和优化。