<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 统一盒模型，避免尺寸偏差 */
}
body {
background-color: #fefefe;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.box{
/* 响应式尺寸：最大 320px，小屏幕自动缩小 */
width: min(320px, 90vw);
height: min(320px, 90vw);
.clock{
width:100%;
height: 100%;
border: 8px solid #2c3e50; /* 加粗边框，更有质感 */
border-radius: 50%;
position: relative;
background: /* 表盘底色：浅灰渐变，更柔和 */
radial-gradient(circle, #ccc 60%,transparent 90%,transparent 91%),
repeating-conic-gradient(
#34495e 0deg 0.8deg, /* 细刻度：0.8°宽，深灰（明显） */
transparent 0.8deg 6deg, /* 间隔：5.2°（每6°一个刻度） */
#2c3e50 6deg 1.5deg, /* 粗刻度：0.7°宽，黑色（更粗） */
transparent 1.5deg 30deg /* 间隔：28.5°（每30°一个粗刻度） */
);
padding: 4%;
/* repeating-conic-gradient(
#000 0deg 1deg,
transparent 1deg 6deg
); */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 自然阴影，提升立体感 */
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
background: #2c3e50;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10; /* 压在指针上方 */
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.pointer{
position: absolute;
top:50%;
left:50%;
transform:translateY(-50%);
border-radius: 4px; /* 指针圆角，更精致 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 指针阴影，避免扁平 */
transform-origin: left center; /* 旋转中心：指针左端（表盘中心） */
}
/* 时针：短粗，浅黑色 */
.h{
width: 28%; /* 用百分比适配响应式，避免固定像素 */
height: 12px;
background: #2c3e50;
animation: rotate linear 43200s infinite;
}
/* 分针：中等长度，深灰色 */
.m{
width: 40%;
height: 8px;
background: skyblue;
animation: rotate linear 3600s infinite;
z-index: 8;
}
/* 秒针：最长最细，红色（突出） */
.s{
width: 45%;
height: 3px;
background: #e74c3c;
animation: rotate linear 60s infinite;
z-index: 9;
/* 秒针末端箭头感 */
border-end-end-radius: 50%;
border-start-end-radius: 50%;
}
}
}
@keyframes rotate {
0% {transform:translateY(-50%) rotate(-90deg)}
100% {transform: translateY(-50%) rotate(270deg)}
}
/* 优化动画平滑度：硬件加速 */
.h, .m, .s {
will-change: transform;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="clock">
<div class="pointer h">
</div>
<div class="pointer m">
</div>
<div class="pointer s">
</div>
</div>
</div>
</body>
<script>
const now = new Date();
const h = now.getHours() % 12 ,m = now.getMinutes(),s = now.getSeconds();
const sr = (s/60)*360,mr = (m/60)*360,hr =(h/12)*360;
document.querySelector('.s').style.rotate =`${sr}deg`;
document.querySelector('.m').style.rotate =`${mr}deg`;
document.querySelector('.h').style.rotate =`${hr}deg`;
</script>
</html>
index.html
index.html