{"html":"

\n \n \n \n

Press to Scan

\n","css":".fingerprint-container {\n position: relative;\n width: 150px;\n height: 150px;\n cursor: pointer;\n animation: pulse 2s infinite ease-in-out;\n}\n\n.fingerprint-svg {\n width: 100%;\n height: 100%;\n color: #f5f5f5;\n transition:\n transform 0.3s ease,\n color 0.3s ease;\n}\n\n/* SVG path animation */\n.fingerprint-path {\n fill: rgba(236, 236, 236, 0.527);\n stroke-width: 0.5px;\n\n stroke-dasharray: 100;\n stroke-dashoffset: 0;\n}\n\n.scan-line {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(to right, transparent, #00ccff, transparent);\n opacity: 0;\n}\n\n.ripple1,\n.ripple2 {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 50%;\n border: 2px solid #00ff00;\n opacity: 0;\n transform: scale(0);\n}\n\n.glow {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 50%;\n box-shadow: 0 0 20px #9aa5a8;\n opacity: 0;\n}\n\n.status {\n position: absolute;\n bottom: -30px;\n width: 100%;\n text-align: center;\n color: #a1a1a1;\n font-size: 14px;\n opacity: 0.7;\n transition:\n opacity 0.3s ease,\n color 0.3s ease;\n}\n\n/* Hover effects */\n.fingerprint-container:hover .fingerprint-svg {\n transform: scale(1.1);\n}\n\n.fingerprint-container:hover .fingerprint-path {\n stroke: #f8f8f8;\n animation: draw 4s infinite linear;\n}\n\n.fingerprint-container:hover .scan-line {\n animation: scan 1.5s infinite linear;\n opacity: 0.7;\n}\n\n/* Click effects */\n.fingerprint-container:active .fingerprint-svg {\n color: #00ff00;\n\n transform: scale(1.05) rotate(15deg);\n animation: spin 0.5s ease-out;\n}\n\n.fingerprint-container:active .fingerprint-path {\n fill: #00ff00;\n stroke: #39ff39;\n animation: draw-fast 0.5s linear;\n}\n\n.fingerprint-container:active .ripple1 {\n animation: ripple-effect 0.6s ease-out;\n}\n\n.fingerprint-container:active .ripple2 {\n animation: ripple-effect 0.8s ease-out 0.2s;\n}\n\n.fingerprint-container:active .glow {\n box-shadow: 0 0 30px #00ff00;\n animation: glow-effect 0.6s ease-out;\n}\n\n.fingerprint-container:active .status {\n opacity: 1;\n color: #00ff00;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.02);\n }\n}\n\n@keyframes scan {\n 0% {\n transform: translateY(0);\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translateY(150px);\n opacity: 0.7;\n }\n}\n\n@keyframes ripple-effect {\n 0% {\n transform: scale(0);\n opacity: 0.5;\n }\n 100% {\n transform: scale(1.5);\n opacity: 0;\n }\n}\n\n@keyframes glow-effect {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.7;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes spin {\n 0% {\n transform: scale(1.05) rotate(0deg);\n }\n 50% {\n transform: scale(1.1) rotate(15deg);\n }\n 100% {\n transform: scale(1.05) rotate(0deg);\n }\n}\n\n@keyframes draw {\n 0% {\n stroke-dashoffset: 200;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes draw-fast {\n 0% {\n stroke-dashoffset: 200;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n}\n"}

kind-moose-93

👁 实时预览

📝 源代码