css制作时间

使用CSS制作时间显示

通过CSS的伪元素和content属性结合JavaScript动态更新时间，可以创建纯前端的时间显示效果。

HTML结构

<div class="time-display" id="time"></div>

CSS样式

.time-display {
  font-family: 'Arial', sans-serif;
  font-size: 2rem;
  color: #333;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.time-display::before {
  content: "🕒 ";
}

JavaScript动态更新

function updateTime() {
  const now = new Date();
  document.getElementById('time').textContent = 
    now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
setInterval(updateTime, 1000);
updateTime();

动画时钟效果

使用CSS动画创建模拟时钟指针旋转效果。

HTML结构

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

CSS样式

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

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

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  margin-left: -3px;
  animation: rotate 43200s linear infinite;
}

.minute-hand {
  width: 4px;
  height: 80px;
  background: #666;
  margin-left: -2px;
  animation: rotate 3600s linear infinite;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: red;
  margin-left: -1px;
  animation: rotate 60s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

数字时钟翻页效果

使用CSS变换创建数字翻页的时钟效果。

HTML结构

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

CSS样式

.flip-clock {
  display: flex;
  gap: 10px;
  font-size: 5rem;
  perspective: 1000px;
}

.flip-hour, .flip-minute, .flip-second {
  position: relative;
  width: 80px;
  height: 120px;
}

.flip-hour::before, .flip-minute::before, .flip-second::before {
  content: attr(data-current);
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.flip-hour::after, .flip-minute::after, .flip-second::after {
  content: attr(data-next);
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.flip-animate::after {
  animation: flip 0.5s ease-in forwards;
}

@keyframes flip {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0deg); }
}

JavaScript实现

function updateFlipClock() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  document.querySelector('.flip-hour').dataset.current = hours;
  document.querySelector('.flip-minute').dataset.current = minutes;
  document.querySelector('.flip-second').dataset.current = seconds;

  // 添加动画类
  document.querySelector('.flip-second').classList.add('flip-animate');

  setTimeout(() => {
    document.querySelector('.flip-hour').dataset.next = hours;
    document.querySelector('.flip-minute').dataset.next = minutes;
    document.querySelector('.flip-second').dataset.next = seconds;
    document.querySelector('.flip-second').classList.remove('flip-animate');
  }, 500);
}

setInterval(updateFlipClock, 1000);
updateFlipClock();