废话不多说，先直接上成品

让我们从零开始分析代码

1. 初始化HTML和CSS

<div class="container">
  <div class="item hours-a">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="item hours-b">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>
<div class="container">
  <div class="item minutes-a">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="item minutes-b">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>
<div class="container">
  <div class="item seconds-a">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="item seconds-b">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}
body {
  font-family: monospace;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  font-size: 10em;
  font-weight: 900;
  background: #2b2b2b;
  color: #fff;
}
.container {
  display: flex;
  /* 确保当前时间处于垂直居中的位置 */
  position: fixed;
  top: 50%;
  transform: translateY(-5%);
}
.container:nth-child(1) {
  transform: translate(-125%, -5%);
}
.container:nth-child(3) {
  transform: translate(125%, -5%);
}

2. 添加计时器，每秒计算需要在纵轴上偏移的位置

let timer = null;
const selectorArr = [
  "hours-a",
  "hours-b",
  "minutes-a",
  "minutes-b",
  "seconds-a",
  "seconds-b",
];
// 为时分秒分别添加纵轴偏移和高亮当前时间的样式
function handleStyle(item, index) {
  const element = document.querySelector("." + item);
  const activeIndex = +formatPartTime(
    choosePartTime(item.split("-")[0])
  ).charAt(index % 2);
  Array.from(element.children).forEach((i) => {
    +i.innerText === activeIndex
      ? ((i.style.color = "#42b883"), (i.style.opacity = 1))
      : ((i.style.color = ""), (i.style.opacity = 1 / 32));
  });
  document.querySelector(
    "." + item
  ).style.transform = `translateY(${toPercentage(
    formatPartTime(choosePartTime(item.split("-")[0])).charAt(index % 2)
  )}%)`;
}
// 区分时分秒进行不同的方法调用
function choosePartTime(value) {
  switch (value) {
    case "hours":
      return new Date().getHours();
    case "minutes":
      return new Date().getMinutes();
    case "seconds":
      return new Date().getSeconds();
  }
}
// 遍历选择器进行时间的更新
function updateTime() {
  selectorArr.forEach((i, index) => handleStyle(i, index));
}
// 用0将时分秒补齐成2位
function formatPartTime(number) {
  return number.toString().padStart(2, "0");
}
// 将数字转换成需要在纵轴上偏移的百分比
function toPercentage(value) {
  return +value * 10 * -1;
}
// 添加计时器并立即执行一次
window.addEventListener("load", function (event) {
  updateTime();
  timer = setInterval(updateTime, 1000);
});
// 取消计时器
window.addEventListener("unload", function (event) {
  clearInterval(timer);
});

3. 添加一点点过渡效果，让时间变化更加丝滑

.item {
  transition: all 1s ease-in-out;
  user-select: none;
}
.item > div {
  transition: inherit;
}

代码至此告一段落，确实很简单对吧，应该没有标题党吧哈哈

很多年没有写原生代码了，写的比较挫或者不够优雅的地方可以在评论区多多指正交流

本人比较喜欢写CSS相关的小玩意儿，codepen作品陆续添加中