{"html":"

\n OFF\n 1\n 2\n 3\n 4\n 5\n \n \n \n \n \n \n

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

\n","css":".wrapper {\n position: relative;\n font-family: monospace;\n}\n\n.knob-outer {\n user-select: none;\n position: relative;\n width: 230px;\n height: 230px;\n border-radius: 100%;\n box-shadow:\n 10px 10px 10px rgba(202, 202, 202, 0.2) inset,\n -10px -10px 10px rgba(151, 151, 151, 0.2) inset;\n background-color: transparent;\n}\n\n.knob-base {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 220px;\n height: 220px;\n margin: -110px 0 0 -110px;\n border-radius: 100%;\n box-shadow:\n inset 0 3px 10px rgba(0, 0, 0, 0.6),\n 0 2px 20px rgba(255, 255, 255, 0.1) inset;\n background: radial-gradient(ellipse at center, #333 0%, #111 100%);\n}\n\n.knob-middle {\n z-index: 4;\n position: absolute;\n left: 50%;\n top: 50%;\n width: 140px;\n height: 140px;\n margin: -70px 0 0 -70px;\n border-radius: 100%;\n box-shadow:\n inset 0 2px 2px rgba(255, 255, 255, 0.2),\n 0 3px 13px rgba(0, 0, 0, 0.85);\n background: #111;\n}\n\n.knob-inner {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 120px;\n height: 120px;\n margin: -60px 0 0 -60px;\n border-radius: 100%;\n background: #222;\n}\n\n.knob-core {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100px;\n height: 100px;\n margin: -50px 0 0 -50px;\n border-radius: 100%;\n box-shadow:\n inset 0 2px 3px rgba(255, 255, 255, 0.3),\n 0 8px 20px rgba(0, 0, 0, 0.9);\n background: #333;\n}\n\n.control {\n z-index: 3;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.knob-base .control label {\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 70px;\n margin-top: -35px;\n transform-origin: 0% 50%;\n cursor: pointer;\n}\n\n.knob-base .control label span {\n position: absolute;\n top: 0;\n right: 0;\n width: 40px;\n height: 100%;\n font-weight: bold;\n font-size: 15px;\n line-height: 70px;\n text-align: center;\n color: #0f0;\n text-shadow: 0 0 5px #0f0;\n}\n\n.knob-base .control label:nth-child(1) {\n transform: rotate(-90deg);\n}\n.knob-base .control label:nth-child(1) span {\n transform: rotate(90deg);\n}\n.knob-base .control label:nth-child(2) {\n transform: rotate(-30deg);\n}\n.knob-base .control label:nth-child(2) span {\n transform: rotate(30deg);\n}\n.knob-base .control label:nth-child(3) {\n transform: rotate(30deg);\n}\n.knob-base .control label:nth-child(3) span {\n transform: rotate(-30deg);\n}\n.knob-base .control label:nth-child(4) {\n transform: rotate(90deg);\n}\n.knob-base .control label:nth-child(4) span {\n transform: rotate(-90deg);\n}\n.knob-base .control label:nth-child(5) {\n transform: rotate(150deg);\n}\n.knob-base .control label:nth-child(5) span {\n transform: rotate(-150deg);\n}\n.knob-base .control label:nth-child(6) {\n transform: rotate(210deg);\n}\n.knob-base .control label:nth-child(6) span {\n transform: rotate(-210deg);\n}\n\n.knob-base .control input {\n position: absolute;\n opacity: 0;\n visibility: hidden;\n}\n\n.pointer {\n z-index: 1;\n position: absolute;\n left: 50%;\n top: 50%;\n width: 50%;\n height: 100px;\n margin-top: -50px;\n transform-origin: 0% 50%;\n transition: transform 0.5s;\n}\n\n.pointer span {\n position: absolute;\n top: 0;\n left: 15px;\n width: 100px;\n height: 100px;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 255, 0, 0.8) 0%,\n rgba(0, 255, 0, 0.2) 42%,\n rgba(0, 255, 0, 0) 72%\n );\n}\n\n.marker {\n z-index: 6;\n position: absolute;\n left: 50%;\n top: 50%;\n width: 50%;\n height: 12px;\n margin-top: -6px;\n transform-origin: 0% 50%;\n transition: transform 0.5s;\n}\n\n.marker span {\n position: absolute;\n top: 0;\n left: 30px;\n width: 12px;\n height: 12px;\n border-radius: 100%;\n background: #0f0;\n box-shadow: 0 0 10px #0f0;\n}\n\n.status {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index: 5;\n}\n\n.off-light {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #333;\n margin-bottom: 8px;\n transition:\n background-color 0.3s,\n box-shadow 0.3s;\n}\n\n.speed-lights {\n display: flex;\n}\n\n.speed-light {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #333;\n margin: 0 3px;\n transition:\n opacity 0.3s,\n background-color 0.3s,\n box-shadow 0.3s;\n}\n\n/* Rotations and Indicator States */\n#fan_off:checked ~ .pointer {\n transform: rotate(-90deg);\n}\n#fan_off:checked ~ .off {\n color: rgb(255, 72, 0);\n text-shadow: 0 0 5px rgb(255, 81, 0);\n}\n#fan_off:checked ~ .pointer span {\n background: radial-gradient(\n ellipse at center,\n rgba(255, 97, 77, 0.8) 0%,\n rgba(255, 94, 0, 0.2) 42%,\n rgba(255, 72, 0, 0) 72%\n );\n}\n#fan_1:checked ~ .pointer {\n transform: rotate(-30deg);\n}\n#fan_2:checked ~ .pointer {\n transform: rotate(30deg);\n}\n#fan_3:checked ~ .pointer {\n transform: rotate(90deg);\n}\n#fan_4:checked ~ .pointer {\n transform: rotate(150deg);\n}\n#fan_5:checked ~ .pointer {\n transform: rotate(210deg);\n}\n\n#fan_off:checked ~ .marker {\n transform: rotate(-90deg);\n}\n#fan_off:checked ~ .marker span {\n background: rgb(255, 60, 0);\n box-shadow: 0 0 10px rgb(255, 60, 0);\n}\n#fan_1:checked ~ .marker {\n transform: rotate(-30deg);\n}\n#fan_2:checked ~ .marker {\n transform: rotate(30deg);\n}\n#fan_3:checked ~ .marker {\n transform: rotate(90deg);\n}\n#fan_4:checked ~ .marker {\n transform: rotate(150deg);\n}\n#fan_5:checked ~ .marker {\n transform: rotate(210deg);\n}\n\n#fan_off:checked ~ .knob-middle .status .speed-lights .speed-light {\n opacity: 0;\n}\n\n.fan:not(#fan_off):checked ~ .knob-middle .status .off-light {\n background-color: #333;\n box-shadow: none;\n}\n\n/* Lines for visual separation */\n.knob-base hr.divider {\n z-index: 1;\n position: absolute;\n top: 50%;\n width: 100%;\n height: 0;\n margin-top: -1px;\n border-width: 1px 0;\n border-style: solid;\n border-top-color: #3c3d3f;\n border-bottom-color: #666769;\n}\n\n.knob-base hr.divider:nth-child(1) {\n transform: rotate(-60deg);\n}\n.knob-base hr.divider:nth-child(2) {\n transform: rotate(60deg);\n}\n"}

lovely-badger-85

👁 实时预览

📝 源代码