CSS 时钟，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<main>
    <ul class="h-p"></ul>
    <ul class="h-a"></ul>
    <span>:</span>
    <ul class="m-p"></ul>
    <ul class="m-a"></ul>
    <span>:</span>
    <ul class="s-p"></ul>
    <ul class="s-a"></ul>
</main>

<template id="clocknumbers">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</template>

</body>

CSS

格式化

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --base: 0;
  --seconds: 0;
  --minutes: 0;
  --hours: 0;
  --h: 75px;
}

body {
  background-color: #222222;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  height: 75px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 5px;
}

main:after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(0,0,0,0.9) 44%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 53%, rgba(0,0,0,0.9) 57%);
}

ul {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul > li {
  font-family: "MuseoModerno", sans-serif;
  font-weight: 900;
  font-size: 72px;
  height: 70px;
  width: 70px;
  background-color: #444;
  color: #fff600;
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  font-family: "MuseoModerno", sans-serif;
  font-weight: 900;
  font-size: 48px;
  height: 70px;
  width: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff600;
}

.s-p {
  translate: 0 calc(var(--h) * -9 + var(--seconds-p) * var(--h));
  transition: 0.5s ease-in;
}

.s-a {
  translate: 0 calc(var(--h) * -9 + var(--seconds-a) * var(--h));
  transition: 0.5s ease-in;
}

.m-p {
  translate: 0 calc(var(--h) * -9 + var(--minutes-p) * var(--h));
  transition: 0.5s ease-in;
}

.m-a {
  translate: 0 calc(var(--h) * -9 + var(--minutes-a) * var(--h));
  transition: 0.5s ease-in;
}

.h-p {
  translate: 0 calc(var(--h) * -9 + var(--hours-p) * var(--h));
  transition: 0.5s ease-in;
}

.h-a {
  translate: 0 calc(var(--h) * -9 + var(--hours-a) * var(--h));
  transition: 0.5s ease-in;
}

格式化


const template = document.querySelector("#clocknumbers");

document.querySelectorAll('ul').forEach((n, i)=>{
  const clone = template.content.cloneNode(true);
  n.appendChild(clone);
})

const update = function(delta) {
  const d = new Date();
  document.body.style.setProperty('--seconds-p', Math.floor(d.getSeconds() / 10));
  document.body.style.setProperty('--seconds-a', d.getSeconds() % 10);

  document.body.style.setProperty('--minutes-p', Math.floor(d.getMinutes() / 10));
  document.body.style.setProperty('--minutes-a', d.getMinutes() % 10);

  document.body.style.setProperty('--hours-p', Math.floor(d.getHours() / 10));
  document.body.style.setProperty('--hours-a', d.getHours() % 10);

  window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);

预览

控制台