用 CSS 中的 sin() 和 cos() 三角函数创建时钟

2023-12-11 05:10:59

CSS 三角函数的迷人魅力

各位技术达人们，欢迎踏入 CSS 三角函数的神奇世界！如今，借助最新版本的 Firefox、Safari 和 Chrome 浏览器，我们得以在 CSS 中运用这项强大的数学工具。解锁 CSS 三角函数的能力，将为创意表现开辟无穷的可能性。

时钟制作的独特角度

在本文中，我们将踏上非同凡响的旅程，使用 CSS 中的 sin() 和 cos() 三角函数亲手打造一个时钟。这是一项激动人心的任务，它将带领我们探索三角函数的应用，并为我们带来一个既美观又实用的成果。

步履如诗，笔尖如画

第一步：搭建舞台

.clock {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

我们用 CSS 创建了一个圆形画布，作为时钟的基础。

第二步：绘制时钟刻度

.tick {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 50%;
}

每个刻度都是一个小圆点，我们用 CSS 沿时钟圆周均匀分布它们。

第三步：三角函数出马

.hand {
  position: absolute;
  width: 5px;
  height: 100px;
  background-color: red;
  transform-origin: bottom;
}

.hour-hand {
  transform: rotate(calc(360deg * (var(--hour) + var(--minute) / 60) / 12));
}

.minute-hand {
  transform: rotate(calc(360deg * var(--minute) / 60));
}

.second-hand {
  transform: rotate(calc(360deg * var(--second) / 60));
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}