纯CSS打造炫酷文本时钟：让时间艺术化，激发灵感迸发

前端

2023-09-14 08:31:10

用 CSS 创造时光艺术：打造引人入胜的文本时钟

时间，不再单调

自古以来，时间只是机械地流淌，没有生命。如今，随着 CSS 的魔术出现，时间也可以变成艺术。一个文本时钟，用代码编织的诗篇，它将时间变为动态的视觉盛宴，在屏幕上肆意流淌。

拒绝平庸，拥抱创意

厌倦了千篇一律的数字时钟？想为网站增添一抹创意？那么，请继续往下读，我们将揭秘如何用纯 CSS 实现一个炫酷的文本时钟。

纯 CSS，轻盈灵动

我们的文本时钟完全由 HTML 和 CSS 构建，无需任何 JavaScript 代码。这意味着它可以在任何支持 CSS 动画的浏览器上运行。此外，它非常轻量级，不会拖慢网站速度。

揭开动画的奥秘

要实现时钟的动画，我们需要使用 @keyframes 规则。它定义了动画的各个阶段。你可以使用不同的 @keyframes 规则来创建不同的动画效果。

掌控时间，随心所欲

一旦创建了 @keyframes 规则，就可以将它们应用到你的 div 元素。animation 属性用于指定要应用的动画效果。该属性可以接受多个值，每个值代表一个动画。

代码示例：简约文本时钟

<div id="clock">
  <span>12</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
</div>

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

#clock {
  width: 200px;
  height: 200px;
  position: relative;
}

#clock span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

#clock span:nth-child(1) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(2) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(3) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(4) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(5) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(6) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(7) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(8) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(9) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(10) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(11) {
  animation: rotate 60s infinite;
}

#clock span:nth-child(12) {
  animation: rotate 60s infinite;
}