{"html":"

\n\n

\n","css":".page-background {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n background: #e0e5ec;\n font-family: \"Helvetica Neue\", \"Arial\", sans-serif;\n}\n\n.clock-container {\n max-width: 333px;\n max-height: 444px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.clock-face {\n width: 300px;\n height: 300px;\n background-color: #e0e5ec;\n border-radius: 50%;\n box-shadow:\n 12px 12px 24px #a3b1c6,\n -12px -12px 24px #ffffff;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.clock-face::before {\n content: \"\";\n position: absolute;\n width: 92%;\n height: 92%;\n background-color: transparent;\n border-radius: 50%;\n box-shadow:\n inset 8px 8px 16px #a3b1c6,\n inset -8px -8px 16px #ffffff;\n}\n\n.marker {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n.marker-dot {\n position: absolute;\n top: 15px;\n left: 50%;\n transform: translateX(-50%);\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #e0e5ec;\n box-shadow:\n inset 1px 1px 2px #a3b1c6,\n inset -1px -1px 2px #ffffff;\n}\n\n.marker-1 {\n transform: rotate(30deg);\n}\n.marker-2 {\n transform: rotate(60deg);\n}\n.marker-3 {\n transform: rotate(90deg);\n}\n.marker-3 .marker-dot {\n width: 8px;\n height: 8px;\n}\n.marker-4 {\n transform: rotate(120deg);\n}\n.marker-5 {\n transform: rotate(150deg);\n}\n.marker-6 {\n transform: rotate(180deg);\n}\n.marker-6 .marker-dot {\n width: 8px;\n height: 8px;\n}\n.marker-7 {\n transform: rotate(210deg);\n}\n.marker-8 {\n transform: rotate(240deg);\n}\n.marker-9 {\n transform: rotate(270deg);\n}\n.marker-9 .marker-dot {\n width: 8px;\n height: 8px;\n}\n.marker-10 {\n transform: rotate(300deg);\n}\n.marker-11 {\n transform: rotate(330deg);\n}\n.marker-12 {\n transform: rotate(360deg);\n}\n.marker-12 .marker-dot {\n width: 8px;\n height: 8px;\n}\n\n.number {\n position: absolute;\n width: 100%;\n height: 100%;\n text-align: center;\n font-size: 24px;\n font-weight: 600;\n color: #b8c1d1;\n text-shadow:\n 1px 1px 1px #ffffff,\n -1px -1px 1px #a3b1c6;\n z-index: 2;\n}\n\n.number-1 {\n transform: rotate(30deg);\n}\n.number-1-text {\n display: inline-block;\n transform: translateY(35px) rotate(-30deg);\n}\n.number-2 {\n transform: rotate(60deg);\n}\n.number-2-text {\n display: inline-block;\n transform: translateY(35px) rotate(-60deg);\n}\n.number-3 {\n transform: rotate(90deg);\n}\n.number-3-text {\n display: inline-block;\n transform: translateY(35px) rotate(-90deg);\n}\n.number-4 {\n transform: rotate(120deg);\n}\n.number-4-text {\n display: inline-block;\n transform: translateY(35px) rotate(-120deg);\n}\n.number-5 {\n transform: rotate(150deg);\n}\n.number-5-text {\n display: inline-block;\n transform: translateY(35px) rotate(-150deg);\n}\n.number-6 {\n transform: rotate(180deg);\n}\n.number-6-text {\n display: inline-block;\n transform: translateY(35px) rotate(-180deg);\n}\n.number-7 {\n transform: rotate(210deg);\n}\n.number-7-text {\n display: inline-block;\n transform: translateY(35px) rotate(-210deg);\n}\n.number-8 {\n transform: rotate(240deg);\n}\n.number-8-text {\n display: inline-block;\n transform: translateY(35px) rotate(-240deg);\n}\n.number-9 {\n transform: rotate(270deg);\n}\n.number-9-text {\n display: inline-block;\n transform: translateY(35px) rotate(-270deg);\n}\n.number-10 {\n transform: rotate(300deg);\n}\n.number-10-text {\n display: inline-block;\n transform: translateY(35px) rotate(-300deg);\n}\n.number-11 {\n transform: rotate(330deg);\n}\n.number-11-text {\n display: inline-block;\n transform: translateY(35px) rotate(-330deg);\n}\n.number-12 {\n transform: rotate(360deg);\n}\n.number-12-text {\n display: inline-block;\n transform: translateY(35px) rotate(-360deg);\n}\n\n.hand {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform-origin: bottom center;\n border-radius: 10px 10px 0 0;\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);\n}\n\n.hour-hand {\n width: 8px;\n height: 50px;\n background: #4a5463;\n transform: translateX(-50%) rotate(105.5deg);\n animation: rotate-hours 43200s linear infinite;\n animation-play-state: running;\n z-index: 5;\n}\n\n.minute-hand {\n width: 6px;\n height: 80px;\n background: #7a8a9e;\n transform: translateX(-50%) rotate(186deg);\n animation: rotate-minutes 3600s linear infinite;\n animation-play-state: running;\n z-index: 6;\n}\n\n.second-hand {\n width: 3px;\n height: 100px;\n background: #e65e5e;\n transform: translateX(-50%) rotate(0deg);\n animation: rotate-seconds 60s steps(60, end) infinite;\n animation-play-state: running;\n z-index: 7;\n}\n\n.center-pin {\n width: 20px;\n height: 20px;\n background: #e0e5ec;\n border-radius: 50%;\n position: absolute;\n z-index: 10;\n box-shadow:\n inset 3px 3px 6px #a3b1c6,\n inset -3px -3px 6px #ffffff;\n}\n\n.center-pin::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 6px;\n height: 6px;\n background: #4a5463;\n border-radius: 50%;\n}\n\n@keyframes rotate-seconds {\n from {\n transform: translateX(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) rotate(360deg);\n }\n}\n\n@keyframes rotate-minutes {\n from {\n transform: translateX(-50%) rotate(186deg);\n }\n to {\n transform: translateX(-50%) rotate(546deg);\n }\n}\n\n@keyframes rotate-hours {\n from {\n transform: translateX(-50%) rotate(105.5deg);\n }\n to {\n transform: translateX(-50%) rotate(465.5deg);\n }\n}\n"}

nice-fly-98

👁 实时预览

📝 源代码