用 CSS3 的 rotate 函数画个时钟

2024-01-10 02:39:32

在浏览互联网时，我们常常会被一些网站上别出心裁的时钟设计所吸引。作为前端开发人员，我也跃跃欲试，决心利用 CSS3 中的 rotate 函数来绘制一个时钟，展现前端开发的魅力。

CSS 的 `rotate` 函数

rotate 函数是 CSS 中用于旋转元素的一个强大工具。它接受一个角度值作为参数，可以将元素绕其中心旋转指定角度。

绘制时钟表盘

首先，我们需要创建一个圆形元素作为时钟表盘。我们可以使用 border-radius 属性将一个 div 元素变成一个圆形。

.clock-face {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f2f2f2;
}

添加时针和分针

接下来，我们需要添加时针和分针。我们可以使用两个伪元素，并将它们定位在时钟表盘的中心。

.clock-face::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 100px;
  background-color: black;
  transform: translate(-50%, -50%) rotate(90deg);
}

.clock-face::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 80px;
  background-color: red;
  transform: translate(-50%, -50%) rotate(90deg);
}

使用 `rotate` 函数旋转时针和分针

为了让时针和分针随着时间推移而旋转，我们需要使用 JavaScript 定期更新它们的 transform 属性。我们可以使用 setInterval 函数每秒更新一次。

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

  const secondsDegrees = (seconds / 60) * 360;
  const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6;
  const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30;

  document.querySelector('.clock-face::before').style.transform = `translate(-50%, -50%) rotate(${secondsDegrees}deg)`;
  document.querySelector('.clock-face::after').style.transform = `translate(-50%, -50%) rotate(${minutesDegrees}deg)`;
}, 1000);