时钟

css:
.shizhong {
margin: 0 auto;
width: 400px;
height: 400px;
position: relative;
border-radius: 200px;
border: solid 3px black;
background: radial-gradient(circle, red 0%, red 1%, transparent 1%, transparent 100%),linear-gradient(0deg,black 20px,transparent 20px,transparent 380px,black 380px),linear-gradient(90deg,black 20px,transparent 20px,transparent 380px,black 380px),radial-gradient(circle,#fff 0%, #fff 67%, transparent 67%, transparent 100%),linear-gradient(30deg,transparent 260px,black 260px,black 265px,transparent 265px),linear-gradient(120deg,transparent 260px,black 260px,black 265px,transparent 265px),linear-gradient(60deg,transparent 260px,black 260px,black 265px,transparent 265px),linear-gradient(150deg,transparent 260px,black 260px,black 265px,transparent 265px),radial-gradient(circle,#fff 0%, #fff 68.5%, transparent 68.5%, transparent 100%),linear-gradient(6deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(12deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(18deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(24deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(36deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(42deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(48deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(54deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(66deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(72deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(78deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(84deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(96deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(102deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(108deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(114deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(126deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(132deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(138deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(144deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(156deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(162deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(168deg,transparent 260px,black 260px,black 263px,transparent 263px),linear-gradient(174deg,transparent 260px,black 260px,black 263px,transparent 263px);
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-size: 100% 100%,5px 400px,400px 5px,100% 100%,400px 400px,400px 400px,400px 400px,400px 400px,100% 100%,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px;
background-position: 0px 0px,198px 0px,0px 196px,0px 0px,0px -13px,0px 23px,0px -22px,0px 13px,0px 0px,0px 43px,0px 26px,0px 11px,0PX -3PX,0PX -21PX,0PX -26PX,0PX -29PX,0PX -30PX,0PX -6PX,-9PX 0PX,-23PX 0PX,-41PX 0PX,-40PX 0PX,-23PX 0PX,-8PX 0PX,4PX 0PX,23PX 0PX,29PX 0PX,31PX 0PX,31PX 0PX,11PX 0PX,0PX -8PX,0PX -22PX,0PX -41PX;
transform: rotate(90deg);
}

.shizhong .HH {
width: 130px;
height: 5px;
background-color: blueviolet;
margin: 197px 70px;
transform-origin: 130px 2.5px;
animation: time 216000000ms linear infinite;
}
.shizhong .MM{
width: 160px;
height: 3px;
background-color: cyan;
margin: 201px 43px;
transform-origin: 160px 1.5px;
animation: time 3600000ms linear infinite;
}
.shizhong .ss {
width: 180px;
height: 2px;
background-color: chartreuse;
margin: -202px 21px;
transform-origin: 180px 1px;
animation: miaoxuanzhuan 60000ms linear infinite;
}

@keyframes time {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes miaoxuanzhuan {
0% {
transform: rotate(0deg);
}
1.66%{
transform: rotate(0deg);
}
1.67%{
transform: rotate(6deg);
}
3.32%{
transform: rotate(6deg);
}
3.33%{
transform: rotate(12deg);
}
4.98%{
transform: rotate(12deg);
}
4.99%{
transform: rotate(18deg);
}
6.64%{
transform: rotate(18deg);
}
6.65%{
transform: rotate(24deg);
}
8.3%{
transform: rotate(24deg);
}
8.31%{
transform: rotate(30deg);
}
9.96%{
transform: rotate(30deg);
}
9.97%{
transform: rotate(36deg);
}
11.62%{
transform: rotate(36deg);
}
11.63%{
transform: rotate(42deg);
}
13.28%{
transform: rotate(42deg);
}
13.29%{
transform: rotate(48deg);
}
14.94%{
transform: rotate(48deg);
}
14.95%{
transform: rotate(54deg);
}
16.6%{
transform: rotate(54deg);
}
16.61%{
transform: rotate(60deg);
}
18.26%{
transform: rotate(60deg);
}
18.27%{
transform: rotate(66deg);
}
19.92%{
transform: rotate(66deg);
}
19.93%{
transform: rotate(72deg);
}
21.58% {
transform: rotate(72deg);
}
21.59%{
transform: rotate(78deg);
}
23.24%{
transform: rotate(78deg);
}
23.25%{
transform: rotate(84deg);
}
24.9%{
transform: rotate(84deg);
}
24.91%{
transform: rotate(90deg);
}
26.56%{
transform: rotate(90deg);
}
26.57%{
transform: rotate(96deg);
}
28.22%{
transform: rotate(96deg);
}
28.23%{
transform: rotate(102deg);
}
29.88%{
transform: rotate(102deg);
}
29.89%{
transform: rotate(108deg);
}
31.54%{
transform: rotate(108deg);
}
31.55%{
transform: rotate(114deg);
}
33.2%{
transform: rotate(114deg);
}
33.21%{
transform: rotate(120deg);
}
34.86%{
transform: rotate(120deg);
}
34.87%{
transform: rotate(126deg);
}
36.52%{
transform: rotate(126deg);
}
36.53%{
transform: rotate(132deg);
}
38.18%{
transform: rotate(132deg);
}
38.19%{
transform: rotate(138deg);
}
39.84%{
transform: rotate(138deg);
}
39.85%{
transform: rotate(144deg);
}
41.5%{
transform: rotate(144deg);
}
41.51% {
transform: rotate(150deg);
}
43.16%{
transform: rotate(150deg);
}
43.17%{
transform: rotate(156deg);
}
44.82%{
transform: rotate(156deg);
}
44.83%{
transform: rotate(162deg);
}
46.48%{
transform: rotate(162deg);
}
46.49%{
transform: rotate(168deg);
}
48.14%{
transform: rotate(168deg);
}
48.15%{
transform: rotate(174deg);
}
49.8%{
transform: rotate(174deg);
}
49.81%{
transform: rotate(180deg);
}
51.46%{
transform: rotate(180deg);
}
51.47%{
transform: rotate(186deg);
}
53.12%{
transform: rotate(186deg);
}
53.13%{
transform: rotate(192deg);
}
54.78%{
transform: rotate(192deg);
}
54.79%{
transform: rotate(198deg);
}
56.44%{
transform: rotate(198deg);
}
56.45%{
transform: rotate(204deg);
}
58.1%{
transform: rotate(204deg);
}
58.11%{
transform: rotate(210deg);
}
59.76%{
transform: rotate(210deg);
}
59.77%{
transform: rotate(216deg);
}
61.42%{
transform: rotate(216deg);
}
61.43%{
transform: rotate(222deg);
}
63.08%{
transform: rotate(222deg);
}
63.09% {
transform: rotate(228deg);
}
64.74%{
transform: rotate(228deg);
}
64.75%{
transform: rotate(234deg);
}
66.4%{
transform: rotate(234deg);
}
66.41%{
transform: rotate(240deg);
}
68.06%{
transform: rotate(240deg);
}
68.07%{
transform: rotate(246deg);
}
69.72%{
transform: rotate(246deg);
}
69.73%{
transform: rotate(252deg);
}
71.38%{
transform: rotate(252deg);
}
71.39%{
transform: rotate(258deg);
}
73.04%{
transform: rotate(258deg);
}
73.05%{
transform: rotate(264deg);
}
74.7%{
transform: rotate(264deg);
}
74.71%{
transform: rotate(270deg);
}
76.36%{
transform: rotate(270deg);
}
76.37%{
transform: rotate(276deg);
}
78.02%{
transform: rotate(276deg);
}
78.03%{
transform: rotate(282deg);
}
79.68%{
transform: rotate(282deg);
}
79.69%{
transform: rotate(288deg);
}
81.34%{
transform: rotate(288deg);
}
81.35%{
transform: rotate(294deg);
}
83%{
transform: rotate(294deg);
}
83.01%{
transform: rotate(300deg);
}
84.66% {
transform: rotate(300deg);
}
84.67%{
transform: rotate(306deg);
}
86.32%{
transform: rotate(306deg);
}
86.33%{
transform: rotate(312deg);
}
87.98%{
transform: rotate(312deg);
}
87.99%{
transform: rotate(318deg);
}
89.64%{
transform: rotate(318deg);
}
89.65%{
transform: rotate(324deg);
}
91.3%{
transform: rotate(324deg);
}
91.31%{
transform: rotate(330deg);
}
92.96%{
transform: rotate(330deg);
}
92.97%{
transform: rotate(336deg);
}
94.62%{
transform: rotate(336deg);
}
94.63%{
transform: rotate(342deg);
}
96.28%{
transform: rotate(342deg);
}
96.29%{
transform: rotate(348deg);
}
97.94%{
transform: rotate(348deg);
}
97.95%{
transform: rotate(354deg);
}
99.7%{
transform: rotate(354deg);
}
99.71%{
transform: rotate(360deg);
}
100%{
transform: rotate(360deg);
}
}

<link rel="stylesheet" href="../css/shizhong.css">