当前位置：首页 > CSS

css怎么制作钟

2026-04-01 15:31:24CSS

使用CSS制作钟表

通过CSS和少量JavaScript可以创建一个动态钟表。以下是实现步骤：

HTML结构

创建钟表的基本HTML结构，包含时、分、秒指针和钟面刻度：

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand sec-hand"></div>
  </div>
</div>

CSS样式

设置钟表的外观和指针动画效果：

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #fff;
  border: 20px solid #333;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}

.hand {
  width: 50%;
  height: 6px;
  background: #333;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand {
  width: 30%;
  left: 20%;
}

.min-hand {
  width: 40%;
  left: 10%;
}

.sec-hand {
  height: 2px;
  background: red;
}

JavaScript功能

添加动态更新指针位置的代码：

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  document.querySelector('.sec-hand').style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  document.querySelector('.min-hand').style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);
setDate();

添加钟表刻度

为钟表添加12小时刻度：

css怎么制作钟

.clock-face::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.marking {
  position: absolute;
  width: 3px;
  height: 15px;
  background: #333;
  left: 50%;
  top: 0;
  transform-origin: bottom center;
}

/* 添加12个刻度 */
.marking:nth-child(1) { transform: rotate(30deg) translateY(-140px); }
.marking:nth-child(2) { transform: rotate(60deg) translateY(-140px); }
/* 继续添加其他刻度... */