{"html":"

\n","css":".v3-cube-loader {\n position: relative;\n width: 220px;\n height: 220px;\n perspective: 1200px;\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n background: transparent;\n}\n\n.v3-cube {\n position: absolute;\n width: 28px;\n height: 28px;\n background: linear-gradient(135deg, #007cf0, #00dfd8);\n border-radius: 6px;\n transform-style: preserve-3d;\n animation: cube-float-3d 3.5s ease-in-out infinite;\n animation-delay: calc(var(--i) * 0.2s);\n opacity: 0.85;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n}\n\n@keyframes cube-float-3d {\n 0% {\n transform: translate3d(\n calc((var(--i) - 5) * 20px),\n calc((var(--i) - 5) * 12px),\n 0\n )\n rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);\n }\n\n 50% {\n transform: translate3d(\n calc((var(--i) - 5) * 20px),\n calc((var(--i) - 5) * 12px),\n 50px\n )\n rotateX(180deg) rotateY(180deg) rotateZ(90deg) scale(1.25);\n }\n\n 100% {\n transform: translate3d(\n calc((var(--i) - 5) * 20px),\n calc((var(--i) - 5) * 12px),\n 0\n )\n rotateX(360deg) rotateY(360deg) rotateZ(180deg) scale(1);\n }\n}\n"}

bad-fox-50

👁 实时预览

📝 源代码