css时钟制作

2026-02-27 04:52:34CSS

制作CSS时钟的基本步骤

使用HTML和CSS创建一个模拟时钟，无需JavaScript即可实现基本样式。以下是关键步骤：

HTML结构

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

基础CSS样式

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

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

时钟指针样式设计

时针样式

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(30deg);
}

分针样式

.minute-hand {
  width: 4px;
  height: 70px;
  background: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(180deg);
}

秒针样式

.second-hand {
  width: 2px;
  height: 80px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(270deg);
}

添加刻度标记

时钟刻度CSS

.clock::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 15px;
  background: #333;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.clock::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 15px;
  background: #333;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

实现动画效果

使用CSS动画让指针转动：

关键帧动画

@keyframes rotate {
  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}

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

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

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

优化和增强

添加数字刻度和其他装饰：

数字刻度HTML

<div class="number number1">1</div>
<div class="number number2">2</div>
<!-- 其他数字... -->

数字刻度CSS

css时钟制作

.number {
  position: absolute;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.number1 { top: 10%; right: 25%; }
.number2 { top: 25%; right: 10%; }
/* 其他数字位置... */

这个纯CSS时钟实现了基本功能，如需精确时间显示需要结合JavaScript获取当前时间并设置初始旋转角度。