{"html":"

\n","css":".realistic-clock {\n position: relative;\n width: 300px;\n height: 300px;\n margin: 50px auto;\n}\n\n.clock-face {\n position: relative;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, #333, #111);\n border-radius: 50%;\n border: 10px solid #cec5c5;\n box-shadow:\n 0 0 30px rgba(0, 0, 0, 0.5),\n inset 0 0 20px rgba(255, 255, 255, 0.1);\n}\n\n.glass-cover {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);\n pointer-events: none;\n}\n\n.center-circle {\n position: absolute;\n width: 20px;\n height: 20px;\n background: radial-gradient(circle, #666, #333);\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);\n}\n\n.hand {\n position: absolute;\n background: #222;\n border-radius: 2px;\n left: 50%;\n transform-origin: bottom;\n transform: translateX(-50%);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);\n}\n\n.hour {\n width: 10px;\n height: 100px;\n top: 70px;\n background: linear-gradient(to bottom, #1d6981, #444);\n animation: rotate-hour 43200s linear infinite;\n}\n\n.minute {\n width: 6px;\n height: 100px;\n top: 60px;\n background: linear-gradient(to bottom, #bbb, #666);\n animation: rotate-minute 3600s linear infinite;\n}\n\n.second {\n width: 3px;\n height: 100px;\n top: 45px;\n background: red;\n animation: rotate-second 60s linear infinite;\n}\n\n.number {\n position: absolute;\n font-size: 20px;\n font-weight: bold;\n color: #fff;\n text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);\n}\n\n@keyframes rotate-hour {\n from {\n transform: translateX(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) rotate(360deg);\n }\n}\n\n@keyframes rotate-minute {\n from {\n transform: translateX(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) rotate(360deg);\n }\n}\n\n@keyframes rotate-second {\n from {\n transform: translateX(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) rotate(360deg);\n }\n}\n"}

quick-insect-72

👁 实时预览

📝 源代码