{"html":"

\n \n

\n \n \n

\n \n

","css":".box {\n --clr-shadow__border: #A8DF8E;\n --clr-text: #F6F4EB;\n --clr-code-line: #43ff85;\n --clr-matrix: #020204;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n letter-spacing: 0.2rem;\n color: var(--clr-text);\n padding: calc(var(--size) / 3) var(--size);\n background: transparent;\n border: none;\n cursor: pointer;\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.matrix {\n width: 100%;\n height: 100%;\n bottom: 0%;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: absolute;\n background: var(--clr-matrix);\n}\n\n.box:hover .matrix {\n opacity: 1;\n}\n\n.code-line {\n position: relative;\n display: flex;\n flex-direction: column-reverse;\n transition: 0.5s;\n min-height: 0.6rem;\n min-width: 0.6rem;\n animation: matrix-animation calc(.2s * var(--i)) linear infinite;\n}\n\n.code {\n text-shadow: 20px 100px var(--clr-code-line),-20px -50px var(--clr-code-line);\n font-size: 0.8rem;\n font-weight: 400;\n color: var(--clr-code-line);\n opacity: 0.5;\n}\n\n.code:first-child {\n color: var(--clr-text);\n opacity: 1;\n}\n\n@keyframes matrix-animation {\n 0% {\n transform: translateY(calc(-50% * var(--i)));\n }\n\n 100% {\n -webkit-transform: translateY(calc(50% * var(--i)));\n transform: translateY(calc(50% * var(--i)));\n }\n}\n\n\n\n\n\n\n\n"}

light-panther-5

👁 实时预览

📝 源代码