{"html":"

\n \n \n

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

\n \n \n

\n","css":".keyboard {\n display: flex;\n gap: 15px;\n background: #e0e0e0;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n.key {\n position: relative;\n width: 60px;\n height: 60px;\n perspective: 200px;\n cursor: pointer;\n}\n.key-checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n.key-top {\n width: 100%;\n height: 100%;\n background: #f5f5f5;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow:\n 0 4px 0 #bdbdbd,\n 0 6px 10px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease;\n transform-style: preserve-3d;\n transform: translateZ(0);\n position: relative;\n}\n.key-hoverable:hover .key-top {\n transform: translateY(-2px) translateZ(10px);\n box-shadow:\n 0 6px 0 #bdbdbd,\n 0 8px 15px rgba(0, 0, 0, 0.15);\n}\n.key-checkbox:checked + .key-top {\n transform: translateY(4px) translateZ(0);\n box-shadow:\n 0 1px 0 #bdbdbd,\n 0 3px 5px rgba(0, 0, 0, 0.1);\n}\n.key-icon {\n width: 24px;\n height: 24px;\n}\n.status-dot {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n.hotspot-dot {\n background: #ff7043;\n}\n.wifi-dot {\n background: #42a5f5;\n}\n.network-dot {\n background: #66bb6a;\n}\n.key-checkbox:checked + .key-top .status-dot {\n opacity: 1;\n}\n.icon-circle {\n fill: #555;\n transition: fill 0.3s ease;\n}\n.icon-ring {\n fill: none;\n stroke: #555;\n stroke-width: 2;\n transition: stroke 0.3s ease;\n}\n.wifi-wave {\n fill: none;\n stroke: #555;\n stroke-width: 2;\n stroke-linecap: round;\n transition: stroke 0.3s ease;\n}\n.network-bar {\n fill: #555;\n transition: fill 0.3s ease;\n}\n.key-hoverable:hover .wifi-wave {\n stroke: #42a5f5;\n}\n.key-hoverable:hover .network-bar {\n fill: #66bb6a;\n}\n.key-checkbox:checked + .key-top .wifi-wave {\n stroke: #42a5f5;\n}\n.key-checkbox:checked + .key-top .network-bar {\n fill: #66bb6a;\n}\n.key-tooltip {\n position: absolute;\n bottom: -40px;\n left: 50%;\n transform: translateX(-50%);\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s ease;\n white-space: nowrap;\n}\n.wifi-tooltip {\n background: #42a5f5;\n color: white;\n}\n.network-tooltip {\n background: #66bb6a;\n color: white;\n}\n.key-hoverable:hover .key-tooltip {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n}\n"}

perfect-duck-76

👁 实时预览

📝 源代码