{"html":"

\n\n

Wait

End?

Load

Ing

Now

...

\n","css":".loader {\n --paper: #f0f0f0;\n --ink: #1a1a1a;\n --cyan: #00ffff;\n --magenta: #ff00ff;\n --yellow: #ffee00;\n --size: 120px;\n --half: 60px;\n --smooth-ease: cubic-bezier(0.8, 0, 0.2, 1);\n margin: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--paper);\n background-image: radial-gradient(var(--ink) 1px, transparent 1px);\n background-size: 24px 24px;\n overflow: hidden;\n perspective: 1500px;\n}\n.action-space {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transform-style: preserve-3d;\n animation: worldShake 6s ease-in-out infinite;\n}\n\n@keyframes worldShake {\n 0%,\n 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n 25% {\n transform: translate(2px, -2px) rotate(0.5deg);\n }\n 50% {\n transform: translate(-3px, 3px) rotate(-0.5deg);\n }\n 75% {\n transform: translate(1px, 1px) rotate(0.2deg);\n }\n}\n\n.speed-lines {\n position: absolute;\n width: 600px;\n height: 600px;\n transform-style: preserve-3d;\n opacity: 0;\n animation: linesFlash 4s var(--smooth-ease) infinite;\n}\n\n@keyframes linesFlash {\n 0%,\n 40%,\n 60%,\n 100% {\n opacity: 0;\n transform: scale(0.8) rotate(0deg);\n }\n 50% {\n opacity: 1;\n transform: scale(1.3) rotate(15deg);\n }\n}\n\n.line {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 2px;\n height: 300px;\n background: var(--ink);\n transform-origin: top center;\n}\n\n.line:nth-child(1) {\n transform: rotate(0deg) translateY(-300px);\n}\n.line:nth-child(2) {\n transform: rotate(45deg) translateY(-300px);\n}\n.line:nth-child(3) {\n transform: rotate(90deg) translateY(-300px);\n}\n.line:nth-child(4) {\n transform: rotate(135deg) translateY(-300px);\n}\n.line:nth-child(5) {\n transform: rotate(180deg) translateY(-300px);\n}\n.line:nth-child(6) {\n transform: rotate(225deg) translateY(-300px);\n}\n.line:nth-child(7) {\n transform: rotate(270deg) translateY(-300px);\n}\n.line:nth-child(8) {\n transform: rotate(315deg) translateY(-300px);\n}\n\n.cube-panel {\n position: relative;\n width: var(--size);\n height: var(--size);\n transform-style: preserve-3d;\n animation: panelLogic 4s var(--smooth-ease) infinite;\n}\n\n@keyframes panelLogic {\n 0%,\n 100% {\n transform: rotateX(-20deg) rotateY(45deg) scale3d(1, 1, 1);\n }\n 25% {\n transform: rotateX(-15deg) rotateY(135deg) scale3d(0.85, 0.85, 0.85);\n }\n 50% {\n transform: rotateX(160deg) rotateY(225deg) scale3d(1.4, 1.4, 1.4);\n }\n 75% {\n transform: rotateX(155deg) rotateY(315deg) scale3d(0.85, 0.85, 0.85);\n }\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: #fff;\n border: 6px solid var(--ink);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n backface-visibility: visible;\n overflow: hidden;\n transition: border-color 0.4s var(--smooth-ease);\n}\n\n.face::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: radial-gradient(var(--ink) 20%, transparent 20%);\n background-size: 6px 6px;\n opacity: 0.1;\n}\n\n.face::after {\n content: \"\";\n position: absolute;\n inset: -10px;\n border: 2px solid var(--cyan);\n box-shadow: 15px 15px 0 var(--magenta);\n opacity: 0.3;\n pointer-events: none;\n transition: transform 0.4s var(--smooth-ease);\n}\n\n.content {\n font-family: \"Arial Black\", sans-serif;\n font-size: 32px;\n color: var(--ink);\n text-transform: uppercase;\n transform: skew(-10deg);\n z-index: 2;\n}\n\n.f-f {\n transform: rotateY(0deg) translateZ(var(--half));\n}\n.f-b {\n transform: rotateY(180deg) translateZ(var(--half));\n}\n.f-r {\n transform: rotateY(90deg) translateZ(var(--half));\n}\n.f-l {\n transform: rotateY(-90deg) translateZ(var(--half));\n}\n.f-t {\n transform: rotateX(90deg) translateZ(var(--half));\n}\n.f-bt {\n transform: rotateX(-90deg) translateZ(var(--half));\n}\n\n.f-f {\n background: var(--yellow);\n}\n.f-r {\n background: var(--cyan);\n}\n.f-l {\n background: var(--magenta);\n}\n\n.onomatopoeia {\n position: absolute;\n color: #fff;\n background: var(--ink);\n padding: 5px 15px;\n font-family: \"Arial Black\", sans-serif;\n font-size: 18px;\n border: 3px solid #fff;\n box-shadow: 5px 5px 0 var(--ink);\n transform: rotate(-15deg);\n opacity: 0;\n animation: popText 4s var(--smooth-ease) infinite;\n}\n\n@keyframes popText {\n 0%,\n 42%,\n 58%,\n 100% {\n opacity: 0;\n transform: scale(0) rotate(-15deg) translate(0, 0);\n }\n 50% {\n opacity: 1;\n transform: scale(1.2) rotate(10deg) translate(60px, -90px);\n }\n}\n"}

sour-puma-69

👁 实时预览

📝 源代码