用 CSS 三角函数画钟表

现代浏览器都支持 CSS 三角函数，因此我们可以用它们来画一个时钟。本文主要使用 cos 和 sin 函数。

1. 创建钟表的外框

<div class="clock">
  <div class="clock-face"></div>
</div>

2. 设置钟表的外观

.clock {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  border-radius: 50%;
  margin: 0 auto;
}

.clock-face {
  width: 280px;
  height: 280px;
  border: 1px solid black;
  border-radius: 50%;
  margin: 10px;
  background-color: white;
}

3. 添加时钟指针

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

4. 设置指针的样式

.clock-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 10px;
  height: 100px;
  background-color: black;
}

.minute-hand {
  width: 5px;
  height: 150px;
  background-color: black;
}

.second-hand {
  width: 2px;
  height: 200px;
  background-color: red;
}

5. 添加时钟刻度

<div class="clock-tick" data-hour="1"></div>
<div class="clock-tick" data-hour="2"></div>
<div class="clock-tick" data-hour="3"></div>
<div class="clock-tick" data-hour="4"></div>
<div class="clock-tick" data-hour="5"></div>
<div class="clock-tick" data-hour="6"></div>
<div class="clock-tick" data-hour="7"></div>
<div class="clock-tick" data-hour="8"></div>
<div class="clock-tick" data-hour="9"></div>
<div class="clock-tick" data-hour="10"></div>
<div class="clock-tick" data-hour="11"></div>
<div class="clock-tick" data-hour="12"></div>

6. 设置时钟刻度的样式

.clock-tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 10px;
  background-color: black;
  transform-origin: 50% 100%;
}

.clock-tick[data-hour="1"] {
  transform: rotate(30deg);
}

.clock-tick[data-hour="2"] {
  transform: rotate(60deg);
}

.clock-tick[data-hour="3"] {
  transform: rotate(90deg);
}

.clock-tick[data-hour="4"] {
  transform: rotate(120deg);
}

.clock-tick[data-hour="5"] {
  transform: rotate(150deg);
}

.clock-tick[data-hour="6"] {
  transform: rotate(180deg);
}

.clock-tick[data-hour="7"] {
  transform: rotate(210deg);
}

.clock-tick[data-hour="8"] {
  transform: rotate(240deg);
}

.clock-tick[data-hour="9"] {
  transform: rotate(270deg);
}

.clock-tick[data-hour="10"] {
  transform: rotate(300deg);
}

.clock-tick[data-hour="11"] {
  transform: rotate(330deg);
}

.clock-tick[data-hour="12"] {
  transform: rotate(0deg);
}

7. 添加时钟动画

.clock-hand.hour-hand {
  animation: hour-hand 3600s linear infinite;
}

.clock-hand.minute-hand {
  animation: minute-hand 60s linear infinite;
}

.clock-hand.second-hand {
  animation: second-hand 1s linear infinite;
}

@keyframes hour-hand {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes minute-hand {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes second-hand {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

8. 添加时钟数字

<div class="clock-number" data-hour="1">1</div>
<div class="clock-number" data-hour="2">2</div>
<div class="clock-number" data-hour="3">3</div>
<div class="clock-number" data-hour="4">4</div>
<div class="clock-number" data-hour="5">5</div>
<div class="clock-number" data-hour="6">6</div>
<div class="clock-number" data-hour="7">7</div>
<div class="clock-number" data-hour="8">8</div>
<div class="clock-number" data-hour="9">9</div>
<div class="clock-number" data-hour="10">10</div>
<div class="clock-number" data-hour="11">11</div>
<div class="clock-number" data-hour="12">12</div>

9. 设置时钟数字的样式

.clock-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
}

.clock-number[data-hour="1"] {
  transform: translate(-50%, -50%) rotate(30deg);
}

.clock-number[data-hour="2"] {
  transform: translate(-50%, -50%) rotate(60deg);
}

.clock-number[data-hour="3"] {
  transform: translate(-50%, -50%) rotate(90deg);
}

.clock-number[data-hour="4"] {
  transform: translate(-50%, -50%) rotate(120deg);
}

.clock-number[data-hour="5"] {
  transform: translate(-50%, -50%) rotate(150deg);
}

.clock-number[data-hour="6"] {
  transform: translate(-50%, -50%) rotate(180deg);
}

.clock-number[data-hour="7"] {
  transform: translate(-50%, -50%) rotate(210deg);
}

.clock-number[data-hour="8"] {
  transform: translate(-50%, -50%) rotate(240deg);
}

.clock-number[data-hour="9"] {
  transform: translate(-50%, -50%) rotate(270deg);
}

.clock-number[data-hour="10"] {
  transform: translate