{"html":"\n \n

\n \n \n \n \n

\n\n","css":".cyber-scanner {\n display: inline-block;\n cursor: pointer;\n}\n.cyber-scanner input {\n display: none;\n}\n\n.scanner-box {\n width: 40px;\n height: 40px;\n position: relative;\n background: rgba(0, 255, 0, 0.1);\n transition: 0.3s;\n}\n\n.corner {\n position: absolute;\n width: 10px;\n height: 10px;\n border-color: #0f0;\n border-style: solid;\n transition: all 0.3s ease;\n}\n\n.top-left {\n top: 0;\n left: 0;\n border-width: 2px 0 0 2px;\n}\n.top-right {\n top: 0;\n right: 0;\n border-width: 2px 2px 0 0;\n}\n.bottom-left {\n bottom: 0;\n left: 0;\n border-width: 0 0 2px 2px;\n}\n.bottom-right {\n bottom: 0;\n right: 0;\n border-width: 0 2px 2px 0;\n}\n\n.scan-center {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 4px;\n height: 4px;\n background: #0f0;\n transform: translate(-50%, -50%) scale(0);\n border-radius: 50%;\n transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n box-shadow: 0 0 10px #0f0;\n}\n\n.cyber-scanner input:checked ~ .scanner-box {\n box-shadow: inset 0 0 15px #0f0;\n}\n\n.cyber-scanner input:checked ~ .scanner-box .top-left {\n top: 10px;\n left: 10px;\n}\n.cyber-scanner input:checked ~ .scanner-box .top-right {\n top: 10px;\n right: 10px;\n}\n.cyber-scanner input:checked ~ .scanner-box .bottom-left {\n bottom: 10px;\n left: 10px;\n}\n.cyber-scanner input:checked ~ .scanner-box .bottom-right {\n bottom: 10px;\n right: 10px;\n}\n\n.cyber-scanner input:checked ~ .scanner-box .scan-center {\n transform: translate(-50%, -50%) scale(2.5);\n background: #fff;\n}\n"}

smooth-snail-20

👁 实时预览

📝 源代码