{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".clock-input {\n display: flex;\n position: relative;\n width: 60px;\n height: 60px;\n --a: #0004, #fff4;\n --b: var(--a), var(--a), var(--a);\n --c: var(--b), var(--b), var(--b);\n background: conic-gradient(\n from -2deg,\n #efefff88,\n #00000088,\n #efefff88,\n #00000088,\n #efefff88\n ),\n radial-gradient(var(--c), var(--c)),\n radial-gradient(circle at 12% 12%, #efefff, #9999a4);\n background-size: calc(100% + 8px) calc(100% + 8px);\n background-position: -4px -4px;\n border: 4px solid #0005;\n border-radius: 50%;\n}\n\n.clock-input input {\n display: none;\n pointer-events: none;\n}\n\n.dial {\n position: absolute;\n width: 26px;\n height: 4px;\n border-radius: 99px;\n background-color: #000b;\n top: calc(50% - 2px);\n left: calc(50% - 2px);\n transform-origin: 2px 50%;\n pointer-events: none;\n transition: 0.15s;\n animation: owo 0.15s;\n}\n\n@keyframes owo {\n 0% {\n transform: rotate(-60deg);\n }\n to {\n transform: rotate(0deg);\n }\n}\n\n.clock-input label {\n position: absolute;\n width: 48px;\n height: 48px;\n cursor: pointer;\n}\n\n#v1:checked ~ #l2 {\n z-index: 2;\n}\n#v1:checked ~ .dial {\n transform: rotate(0deg);\n}\n\n#v2:checked ~ #l3 {\n z-index: 2;\n}\n#v2:checked ~ .dial {\n transform: rotate(60deg);\n animation: none;\n}\n\n#v3:checked ~ #l4 {\n z-index: 2;\n}\n#v3:checked ~ .dial {\n transform: rotate(120deg);\n animation: none;\n}\n\n#v4:checked ~ #l5 {\n z-index: 2;\n}\n#v4:checked ~ .dial {\n transform: rotate(180deg);\n animation: none;\n}\n\n#v5:checked ~ #l6 {\n z-index: 2;\n}\n#v5:checked ~ .dial {\n transform: rotate(240deg);\n animation: none;\n}\n\n#v6:checked ~ #l1 {\n z-index: 2;\n}\n#v6:checked ~ .dial {\n transform: rotate(300deg);\n animation: none;\n}\n\n.notch {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1px;\n background-color: #fffc;\n transform: translate(-50%) rotate(calc((var(--n) - 1) * 60deg))\n translateX(38px);\n counter-reset: section;\n}\n\n.notch::before {\n content: counter(section);\n position: absolute;\n counter-set: section var(--n);\n color: #fffc;\n transform: translate(12px, -50%) rotate(calc((var(--n) - 1) * -60deg));\n font-size: 12px;\n}\n"}

grumpy-deer-99

👁 实时预览

📝 源代码