{"html":"

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

\n 1\n 0\n 1\n 0\n 1\n

\n","css":".fingerprint-container {\n position: relative;\n width: 120px;\n height: 120px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.fingerprint-button {\n position: relative;\n width: 100px;\n height: 100px;\n background: #1a1a1a;\n border: 2px solid #00ff00;\n border-radius: 50%;\n box-shadow: 0 0 15px #00ff00;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.3s ease;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* SVG Fingerprint */\n.fingerprint-svg {\n width: 70px;\n height: 70px;\n stroke: #00ff00;\n fill: none;\n z-index: 2;\n transition: stroke 0.3s ease;\n}\n\n.fingerprint-svg path {\n stroke-dasharray: 50;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 0.5s ease;\n}\n\n/* Scan line */\n.scan-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: rgba(0, 255, 0, 0.6);\n box-shadow: 0 0 10px #00ff00;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 3;\n}\n\n/* Horizontal glitch overlay */\n.glitch-overlay-h {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(0, 255, 0, 0.2),\n transparent\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}\n\n/* Vertical glitch overlay */\n.glitch-overlay-v {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 0deg,\n transparent,\n rgba(0, 255, 0, 0.15),\n transparent\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}\n\n/* Distorted glitch layer */\n.glitch-distort {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 255, 0, 0.1);\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}\n\n/* Ripple effect for click */\n.ripple-effect {\n position: absolute;\n width: 0;\n height: 0;\n background: rgba(0, 255, 0, 0.3);\n border-radius: 50%;\n opacity: 0;\n z-index: 2;\n pointer-events: none;\n}\n\n/* Binary particles */\n.binary-particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 4;\n}\n\n.particle {\n position: absolute;\n color: #00ff00;\n font-size: 10px;\n opacity: 0;\n animation: particle-rise 1.2s linear infinite;\n}\n\n/* Hover state */\n.fingerprint-button:hover {\n background: rgba(0, 255, 0, 0.1);\n box-shadow: 0 0 25px #00ff00;\n transform: scale(1.05);\n}\n\n.fingerprint-button:hover .fingerprint-svg {\n stroke: #00cc00;\n}\n\n.fingerprint-button:hover .fingerprint-svg path:nth-child(1) {\n animation: scan-path-1 1.5s infinite linear;\n}\n\n.fingerprint-button:hover .fingerprint-svg path:nth-child(2) {\n animation: scan-path-2 1.5s infinite linear;\n}\n\n.fingerprint-button:hover .fingerprint-svg path:nth-child(3) {\n animation: scan-path-3 1.5s infinite linear;\n}\n\n.fingerprint-button:hover .scan-line {\n opacity: 1;\n animation: scan-move 1.5s infinite linear;\n}\n\n.fingerprint-button:hover .glitch-overlay-h {\n opacity: 1;\n animation: glitch-h 1s infinite;\n}\n\n.fingerprint-button:hover .glitch-overlay-v {\n opacity: 1;\n animation: glitch-v 0.8s infinite;\n}\n\n.fingerprint-button:hover .glitch-distort {\n opacity: 0.8;\n animation: glitch-distort 0.5s infinite;\n}\n\n/* Clicked state */\n.fingerprint-button:active {\n background: #00ff00;\n box-shadow:\n 0 0 30px #00ff00,\n 0 0 50px #00ff00;\n transition: all 0.1s ease;\n}\n\n.fingerprint-button:active .fingerprint-svg {\n stroke: #0a0a0a;\n}\n\n.fingerprint-button:active .fingerprint-svg path {\n animation: scanned-path 0.5s ease-in-out forwards;\n}\n\n.fingerprint-button:active .scan-line,\n.fingerprint-button:active .glitch-overlay-h,\n.fingerprint-button:active .glitch-overlay-v,\n.fingerprint-button:active .glitch-distort {\n opacity: 0;\n}\n\n.fingerprint-button:active .ripple-effect {\n width: 120px;\n height: 120px;\n opacity: 1;\n animation: ripple 0.6s ease-out forwards;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n}\n\n/* Animations */\n@keyframes scan-path-1 {\n 0% {\n stroke-dashoffset: 50;\n }\n 50% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: 50;\n }\n}\n\n@keyframes scan-path-2 {\n 0% {\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dashoffset: 50;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes scan-path-3 {\n 0% {\n stroke-dashoffset: 25;\n }\n 50% {\n stroke-dashoffset: 75;\n }\n 100% {\n stroke-dashoffset: 25;\n }\n}\n\n@keyframes scan-move {\n 0% {\n top: 0;\n }\n 100% {\n top: 100%;\n }\n}\n\n@keyframes glitch-h {\n 0% {\n transform: translateX(-100%);\n }\n 20% {\n transform: translateX(100%) skewX(5deg);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n@keyframes glitch-v {\n 0% {\n transform: translateY(-100%);\n }\n 30% {\n transform: translateY(100%) skewY(3deg);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n\n@keyframes glitch-distort {\n 0% {\n transform: translate(0, 0);\n }\n 20% {\n transform: translate(-2px, 2px);\n }\n 40% {\n transform: translate(2px, -2px);\n }\n 60% {\n transform: translate(-1px, 1px);\n }\n 80% {\n transform: translate(1px, -1px);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes scanned-path {\n 0% {\n stroke-dashoffset: 0;\n opacity: 1;\n }\n 50% {\n stroke-dashoffset: 50;\n opacity: 0.8;\n }\n 100% {\n stroke-dashoffset: 0;\n opacity: 1;\n }\n}\n\n@keyframes ripple {\n 0% {\n width: 0;\n height: 0;\n opacity: 1;\n }\n 100% {\n width: 120px;\n height: 120px;\n opacity: 0;\n }\n}\n\n@keyframes particle-rise {\n 0% {\n opacity: 0;\n transform: translateY(100%) translateX(0);\n }\n 20% {\n opacity: 0.7;\n }\n 100% {\n opacity: 0;\n transform: translateY(-100%) translateX(10px);\n }\n}\n"}

light-termite-99

👁 实时预览

📝 源代码