{"html":"

\n \n \n \n \n

\n","css":".scene {\n perspective: 800px;\n --bg-body: #000;\n --face-bg: rgba(22, 27, 23, 0.9);\n --border-color: rgba(1, 206, 8, 0.9);\n --box-shadow-color: rgba(8, 254, 0, 0.6);\n --filter-shadow-color: rgba(26, 255, 0, 0.5);\n --svg-shadow-color: rgba(17, 255, 0, 0.4);\n}\n\n.spinner {\n width: 100px;\n height: 100px;\n position: relative;\n transform-style: preserve-3d;\n transform-origin: center;\n animation: rotateCube 6s infinite ease-in-out;\n}\n\n.face {\n position: absolute;\n width: 100px;\n height: 100px;\n background: var(--face-bg);\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid var(--border-color);\n box-shadow: 0 0 12px var(--box-shadow-color);\n filter: drop-shadow(0px 0px 6px var(--filter-shadow-color));\n}\n\n.face svg {\n width: 80px;\n height: 80px;\n opacity: 0.9;\n filter: drop-shadow(0px 0px 12px var(--svg-shadow-color));\n}\n\n.front {\n transform: translateZ(50px);\n}\n.back {\n transform: rotateY(180deg) translateZ(50px);\n}\n.left {\n transform: rotateY(-90deg) translateZ(50px);\n}\n.right {\n transform: rotateY(90deg) translateZ(50px);\n}\n.top {\n transform: rotateX(90deg) translateZ(50px);\n}\n.bottom {\n transform: rotateX(-90deg) translateZ(50px);\n}\n\n@keyframes rotateCube {\n 0% {\n transform: rotateX(0deg) rotateY(0deg) scale(1);\n }\n 50% {\n transform: rotateX(180deg) rotateY(180deg) scale(1.05);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg) scale(1);\n }\n}\n"}

wise-pig-91

👁 实时预览

📝 源代码