实现了一个时钟效果，包括一个背景颜色为淡粉色的容器和一个使用Google字体库中的Kanit字体的时钟。时钟使用了flex布局，使其水平和垂直居中。时钟的数字使用了Kanit字体，字体大小为150px，字体加粗，阴影效果使用了多个不同颜色和大小的阴影，使其看起来更加立体和有层次感。
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立体字时钟</title>
<style>
/* 使用了Google字体库中的Kanit字体，用于时钟数字的显示。 */
@import url("http://fonts.googleapis.com/css?family=Kanit");
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eacccc;
user-select: none;
}
.clock {
display: flex;
}
.clock p {
width: 95px;
font-size: 150px;
color: #fff;
text-align: center;
font-family: "Kanit";
font-weight: 900;
text-shadow: 0 1px 0 #deafaf,
0 2px 0 #bda8a8,
0 3px 0 #d8a1a1,
0 4px 0 #d59999,
0 5px 0 #d29292,
0 6px 0 #cf8b8b,
0 7px 0 #cc8484,
0 8px 0 #c97d7d,
0 0 5px rgba(231, 156, 156, 0.05),
0 -1px 3px rgba(231, 156, 156, 0.2),
0 9px 9px rgba(231, 156, 156, 0.3),
0 12px 12px rgba(231, 156, 156, 0.3),
0 15px 15px rgba(231, 156, 156, 0.3);
}
</style>
</head>
<body>
<div class="clock">
<p id="1">0</p>
<p id="2">0</p>
<p id="3">:</p>
<p id="4">0</p>
<p id="5">0</p>
<p id="6">:</p>
<p id="7">0</p>
<p id="8">0</p>
</div>
</body>
<script>
function myTime() {
let time = new Date();
let hh = time.getHours();
let mm = time.getMinutes();
let ss = time.getSeconds();
document.getElementById("1").innerText = Math.floor(hh / 10);
document.getElementById("2").innerText = hh % 10;
document.getElementById("4").innerText = Math.floor(mm / 10);
document.getElementById("5").innerText = mm % 10;
document.getElementById("7").innerText = Math.floor(ss / 10);
document.getElementById("8").innerText = ss % 10;
}
setInterval(myTime, 1000);
</script>
</html>
