css制作时间

使用CSS制作时间显示

通过CSS的伪元素和动画效果可以创建动态时间显示。以下是一个简单的方法：

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

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

.clock::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 90px;
  background: #333;
  left: 50%;
  top: 50%;
  transform-origin: bottom center;
  animation: rotate 60s linear infinite;
}

.clock::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 70px;
  background: #f00;
  left: 50%;
  top: 50%;
  transform-origin: bottom center;
  animation: rotate 3600s linear infinite;
}

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

数字时钟实现

使用CSS计数器和动画创建数字时间显示：

<div class="digital-clock">
  <span class="hours">00</span>:
  <span class="minutes">00</span>:
  <span class="seconds">00</span>
</div>

.digital-clock {
  font-family: 'Courier New', monospace;
  font-size: 3rem;
  color: #333;
}

@keyframes count {
  0% { content: "00"; }
  100% { content: "59"; }
}

.seconds {
  animation: count 60s steps(60) infinite;
}

使用CSS变量动态更新

结合JavaScript动态更新CSS变量实现实时时钟：

<div class="js-clock" style="--hour: 0; --minute: 0; --second: 0;"></div>

.js-clock {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(
    #f00 calc(var(--second) * 6deg),
    #333 0 calc(var(--minute) * 6deg),
    #000 0 calc(var(--hour) * 30deg + var(--minute) * 0.5deg),
    #eee 0
  );
}

function updateClock() {
  const now = new Date();
  const clock = document.querySelector('.js-clock');
  clock.style.setProperty('--hour', now.getHours());
  clock.style.setProperty('--minute', now.getMinutes());
  clock.style.setProperty('--second', now.getSeconds());
}

setInterval(updateClock, 1000);

纯CSS计时器

创建倒计时效果的CSS计时器：

<div class="timer">
  <div class="progress"></div>
</div>

.timer {
  width: 300px;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  width: 100%;
  background: #4CAF50;
  animation: countdown 10s linear forwards;
}

@keyframes countdown {
  0% { width: 100%; }
  100% { width: 0%; }
}

这些方法展示了使用CSS创建各种时间相关效果的不同技术，可以根据需要选择合适的方式或组合使用。