用CSS创造一个外硬内柔的时钟

前端

2023-10-20 22:57:14

外硬内柔的时钟：独特风格与时间交织

前言

在时钟已不仅仅是报时工具的时代，它们摇身一变，成为装饰房间、彰显个性的时尚单品。如果您厌倦了平庸乏味的传统时钟，不妨来探索这款与众不同的“外硬内柔”时钟。

刚柔并济的外观

这款时钟的外表冷峻锋利，黑色表盘配以锐利的指针，营造出强烈的视觉冲击力。然而，当您细细端详，却会发现它柔弱的一面——粉色霓虹灯环绕着表盘，散发着柔和的光芒。

这种鲜明的反差令人着迷，不禁引人深思“外硬内柔”的真正内涵。

DIY教程

打造这款独特时钟并不复杂，只需按照以下步骤操作：

1. 创建时钟表盘

.clock {
  width: 200px;
  height: 200px;
  background-color: black;
  border-radius: 50%;
}

2. 创建时钟指针

.hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: bottom;
}

.hour-hand {
  width: 10px;
  height: 80px;
  background-color: white;
}

.minute-hand {
  width: 5px;
  height: 100px;
  background-color: white;
}

.second-hand {
  width: 2px;
  height: 120px;
  background-color: red;
}

3. 创建霓虹灯环

.neon-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #FF00FF;
  animation: neon-ring-animation 1s infinite;
}

@keyframes neon-ring-animation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

4. 组合所有元素

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