当前位置：首页 > CSS

css制作钟表

2026-02-27 04:35:51CSS

使用CSS制作钟表

创建HTML结构

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

基础钟表样式

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

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

指针样式

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
}

.hour-hand {
  width: 8px;
  height: 80px;
  background: #333;
  margin-left: -4px;
}

.minute-hand {
  width: 6px;
  height: 120px;
  background: #666;
  margin-left: -3px;
}

.second-hand {
  width: 2px;
  height: 140px;
  background: red;
  margin-left: -1px;
}

添加刻度标记

.clock::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 20px;
  background: #333;
  left: 50%;
  top: 10px;
  margin-left: -2.5px;
  transform-origin: center 140px;
}

.clock::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 20px;
  background: #333;
  left: 50%;
  bottom: 10px;
  margin-left: -2.5px;
  transform-origin: center 140px;
}

/* 添加12个刻度 */
.clock {
  position: relative;
}

.clock::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 20px;
  background: #333;
  left: 50%;
  top: 10px;
  margin-left: -2.5px;
}

.clock::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 20px;
  background: #333;
  left: 50%;
  bottom: 10px;
  margin-left: -2.5px;
}

/* 完整刻度实现需要更复杂的CSS或JavaScript */

使用动画让指针转动

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

.second-hand {
  animation: rotate 60s linear infinite;
}

.minute-hand {
  animation: rotate 3600s linear infinite;
}

.hour-hand {
  animation: rotate 43200s linear infinite;
}

实时动态钟表实现

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

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

  document.querySelector('.second-hand').style.transform = `rotate(${secondDegrees}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegrees}deg)`;
  document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(updateClock, 1000);
updateClock(); // 立即执行一次

完整数字钟表样式

.digital-clock {
  font-family: 'Arial', sans-serif;
  font-size: 2rem;
  text-align: center;
  margin-top: 20px;
  color: #333;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

数字钟表HTML

<div class="digital-clock" id="digitalClock"></div>

数字钟表JavaScript

function updateDigitalClock() {
  const now = new Date();
  const timeString = now.toLocaleTimeString();
  document.getElementById('digitalClock').textContent = timeString;
}

setInterval(updateDigitalClock, 1000);
updateDigitalClock();

这些代码组合可以创建一个完整的CSS钟表，包含模拟指针和数字显示两种形式。静态版本使用CSS动画，动态版本使用JavaScript实时更新时间。可以根据需要调整尺寸、颜色和样式来定制钟表外观。

css制作钟表