当前位置：首页 > CSS

css时钟制作

2026-02-12 20:15:45CSS

CSS时钟制作方法

使用CSS和少量JavaScript可以创建一个动态的时钟。以下是实现步骤：

HTML结构

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

CSS样式

css时钟制作

.clock {
  width: 300px;
  height: 300px;
  border: 10px solid #333;
  border-radius: 50%;
  position: relative;
  background: #fff;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  bottom: 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: 130px;
  background: red;
  margin-left: -1px;
}

.center {
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
}

JavaScript功能

function updateClock() {
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const hourDeg = (hour * 30) + (minute * 0.5);
  const minuteDeg = minute * 6;
  const secondDeg = second * 6;

  document.querySelector('.hour-hand').style.transform = `rotate(${hourDeg}deg)`;
  document.querySelector('.minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
  document.querySelector('.second-hand').style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock();

添加时钟刻度

可以在时钟周围添加刻度标记：

css时钟制作

.clock::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.clock::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 添加12个刻度 */
.clock::before {
  background: 
    linear-gradient(0deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(30deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(60deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(120deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(150deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(180deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(210deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(240deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(270deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(300deg, transparent 45%, #333 45%, #333 55%, transparent 55%),
    linear-gradient(330deg, transparent 45%, #333 45%, #333 55%, transparent 55%);
}

动画效果优化

为指针添加平滑过渡效果：

.hour-hand, .minute-hand, .second-hand {
  transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.3, 1);
}

数字时钟版本

如果需要同时显示数字时间：

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

function updateDigitalClock() {
  const now = new Date();
  const timeString = now.toLocaleTimeString();
  document.querySelector('.digital-clock').textContent = timeString;
}

setInterval(updateDigitalClock, 1000);
updateDigitalClock();

这些代码组合起来可以创建一个完整的CSS时钟，包含模拟和数字显示。可以根据需要调整尺寸、颜色和样式。