{"html":"

\n","css":".matrix-loader-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.matrix-loader {\n perspective: 1000px;\n}\n\n.matrix-loader .cube {\n width: 90px;\n height: 90px;\n position: relative;\n transform-style: preserve-3d;\n animation: cubeSpin 12s infinite linear;\n}\n\n.matrix-loader .layer {\n position: absolute;\n inset: 0;\n display: grid;\n grid-template: repeat(3, 1fr) / repeat(3, 1fr);\n gap: 3px;\n transform-style: preserve-3d;\n border: 1px solid #444;\n background: rgba(255, 255, 255, 0.015);\n box-shadow: inset 0 0 6px #00f8ff22;\n}\n\n.matrix-loader .l1 {\n transform: translateZ(-20px);\n}\n.matrix-loader .l2 {\n transform: translateZ(0);\n}\n.matrix-loader .l3 {\n transform: translateZ(20px);\n}\n\n.matrix-loader .block {\n width: 26px;\n height: 26px;\n border-radius: 3px;\n transform: translateZ(-80px) scale(0.3);\n opacity: 0;\n box-shadow: 0 0 6px #ffffff11;\n animation: riseIn 3s infinite ease-in-out;\n}\n\n.matrix-loader .l1 .block {\n background: #ff595e;\n}\n.matrix-loader .l2 .block {\n background: #ffca3a;\n}\n.matrix-loader .l3 .block {\n background: #8ac926;\n}\n\n.matrix-loader .layer .block:nth-child(1) {\n animation-delay: 0s;\n}\n.matrix-loader .layer .block:nth-child(2) {\n animation-delay: 0.1s;\n}\n.matrix-loader .layer .block:nth-child(3) {\n animation-delay: 0.2s;\n}\n.matrix-loader .layer .block:nth-child(4) {\n animation-delay: 0.3s;\n}\n.matrix-loader .layer .block:nth-child(5) {\n animation-delay: 0.4s;\n}\n.matrix-loader .layer .block:nth-child(6) {\n animation-delay: 0.5s;\n}\n.matrix-loader .layer .block:nth-child(7) {\n animation-delay: 0.6s;\n}\n.matrix-loader .layer .block:nth-child(8) {\n animation-delay: 0.7s;\n}\n.matrix-loader .layer .block:nth-child(9) {\n animation-delay: 0.8s;\n}\n\n@keyframes riseIn {\n 0% {\n transform: translateZ(-80px) scale(0.3);\n opacity: 0;\n }\n 50% {\n transform: translateZ(0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateZ(20px) scale(0.5);\n opacity: 0.4;\n }\n}\n\n@keyframes cubeSpin {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}

fast-goose-12

👁 实时预览

📝 源代码