{"html":"

\n\n

\n 01\n Start\n

\n 02\n Action\n

\n 03\n Zoom\n

\n 04\n Wait\n

\n 05\n Boom\n

\n 06\n Loading\n

\n","css":".container {\n --bg: #ff4500;\n --ink: #000000;\n --paper: #ffffff;\n --accent-1: #00d2ff;\n --accent-2: #ff00ff;\n --accent-3: #ffef00;\n --size: 110px;\n --half: 55px;\n --smooth-snap: cubic-bezier(0.85, 0, 0.15, 1);\n\n margin: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n /* background: var(--bg); */\n overflow: hidden;\n perspective: 1500px;\n}\n\n.action-rays {\n position: absolute;\n width: 300vmax;\n height: 300vmax;\n /* background: repeating-conic-gradient(\n from 0deg,\n rgba(0,0,0,0.15) 0deg 10deg,\n transparent 10deg 20deg\n ); */\n /* animation: raySpin 20s linear infinite; */\n z-index: -1;\n}\n\n@keyframes raySpin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.container::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: radial-gradient(var(--ink) 1px, transparent 1px);\n background-size: 15px 15px;\n opacity: 0.1;\n pointer-events: none;\n}\n\n.stage {\n position: relative;\n width: var(--size);\n height: var(--size);\n transform-style: preserve-3d;\n animation: stageJump 4s var(--smooth-snap) infinite;\n}\n\n@keyframes stageJump {\n 0%,\n 100% {\n transform: scale(1) rotateX(-20deg) rotateY(0deg);\n }\n 50% {\n transform: scale(1.3) rotateX(160deg) rotateY(180deg);\n }\n}\n\n.cube {\n position: absolute;\n inset: 0;\n transform-style: preserve-3d;\n animation: autoRotate 8s linear infinite;\n}\n\n@keyframes autoRotate {\n to {\n transform: rotateY(360deg) rotateZ(360deg);\n }\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--paper);\n border: 5px solid var(--ink);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n backface-visibility: visible;\n overflow: hidden;\n box-shadow: 12px 12px 0 var(--ink);\n}\n\n.f-1 {\n transform: rotateY(0deg) translateZ(var(--half));\n background: var(--accent-1);\n}\n.f-2 {\n transform: rotateY(180deg) translateZ(var(--half));\n background: var(--accent-2);\n}\n.f-3 {\n transform: rotateY(90deg) translateZ(var(--half));\n background: var(--accent-3);\n}\n.f-4 {\n transform: rotateY(-90deg) translateZ(var(--half));\n background: var(--paper);\n}\n.f-5 {\n transform: rotateX(90deg) translateZ(var(--half));\n background: #ff5252;\n}\n.f-6 {\n transform: rotateX(-90deg) translateZ(var(--half));\n background: #00e676;\n}\n\n.face::before {\n content: \"\";\n position: absolute;\n width: 150%;\n height: 20px;\n background: var(--ink);\n transform: rotate(-45deg) translateY(-40px);\n opacity: 0.2;\n}\n\n.panel-num {\n font-family: \"Arial Black\", sans-serif;\n font-size: 40px;\n color: var(--ink);\n line-height: 1;\n margin: 0;\n transform: skew(-10deg);\n z-index: 2;\n}\n\n.panel-label {\n font-family: \"Arial Black\", sans-serif;\n font-size: 12px;\n background: var(--ink);\n color: #fff;\n padding: 2px 8px;\n margin-top: 5px;\n text-transform: uppercase;\n z-index: 2;\n}\n\n.pop-burst {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n}\n\n.word {\n position: absolute;\n font-family: \"Arial Black\", sans-serif;\n font-size: 60px;\n color: var(--paper);\n -webkit-text-stroke: 3px var(--ink);\n text-shadow: 8px 8px 0 var(--accent-2);\n opacity: 0;\n animation: comicFlash 4s var(--smooth-snap) infinite;\n}\n\n@keyframes comicFlash {\n 0%,\n 48%,\n 52%,\n 100% {\n opacity: 0;\n transform: scale(0.5) rotate(-20deg);\n }\n 50% {\n opacity: 1;\n transform: scale(1.4) rotate(5deg);\n }\n}\n\n.shadow-floor {\n position: absolute;\n bottom: -100px;\n width: 150px;\n height: 40px;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n filter: blur(10px);\n animation: shadowPulse 4s var(--smooth-snap) infinite;\n}\n\n@keyframes shadowPulse {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 0.5;\n }\n 50% {\n transform: scale(0.4);\n opacity: 0.1;\n }\n}\n"}

bitter-dragon-32

👁 实时预览

📝 源代码