CSS 时钟，HTML/Vue代码在线实时编辑、预览

HTML

格式化

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

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

            
            <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

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

            
            @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;
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

            
            
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);