当前位置：首页 > CSS

css制作闹钟

2026-02-13 04:42:54CSS

使用CSS制作闹钟的步骤

HTML结构 创建一个基本的HTML结构，包含闹钟的容器、表盘、指针和数字。

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

CSS样式设计 设置闹钟的外观和动画效果。

.alarm-clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #f5f5f5;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.clock-face {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  border-radius: 50%;
  background-color: #fff;
}

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

.hour-hand {
  width: 6px;
  height: 70px;
  background-color: #333;
  transform: translateX(-50%) rotate(0deg);
}

.minute-hand {
  width: 4px;
  height: 100px;
  background-color: #666;
  transform: translateX(-50%) rotate(0deg);
}

.second-hand {
  width: 2px;
  height: 120px;
  background-color: red;
  transform: translateX(-50%) rotate(0deg);
}

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

添加动画效果 使用CSS动画让指针动起来。

@keyframes rotate-hour {
  100% { transform: translateX(-50%) rotate(360deg); }
}
@keyframes rotate-minute {
  100% { transform: translateX(-50%) rotate(360deg); }
}
@keyframes rotate-second {
  100% { transform: translateX(-50%) rotate(360deg); }
}

.hour-hand {
  animation: rotate-hour 43200s linear infinite;
}
.minute-hand {
  animation: rotate-minute 3600s linear infinite;
}
.second-hand {
  animation: rotate-second 60s linear infinite;
}

添加数字刻度 在表盘上添加时间刻度。

.clock-face::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(0deg, transparent 48%, #333 49%, #333 51%, transparent 52%);
}

.clock-face::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(30deg, transparent 48%, #333 49%, #333 51%, transparent 52%);
}

响应式设计 确保闹钟在不同设备上都能正常显示。

@media (max-width: 600px) {
  .alarm-clock {
    width: 200px;
    height: 200px;
  }
  .hour-hand { height: 50px; }
  .minute-hand { height: 70px; }
  .second-hand { height: 90px; }
}