{"html":"

\n","css":".loader-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 900px;\n perspective: 500px;\n}\n\n.loader-3d {\n width: 40px;\n height: 40px;\n position: relative;\n transform-style: preserve-3d;\n animation: rotate-3d 6s infinite linear;\n}\n\n.loader-inner {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n animation: pulse 1.5s infinite ease-in-out alternate;\n}\n\n.loader-face {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0.9;\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: 0 0 8px rgba(100, 200, 255, 0.4);\n}\n\n.loader-face-front {\n background: linear-gradient(45deg, #ff3366, #ff3366 50%, transparent 50%),\n linear-gradient(-45deg, #8844ee, #8844ee 50%, transparent 50%);\n background-size: 10px 10px;\n transform: translateZ(20px);\n}\n\n.loader-face-back {\n background: repeating-linear-gradient(\n 0deg,\n #00ffcc,\n #00ffcc 3px,\n transparent 3px,\n transparent 6px\n ),\n repeating-linear-gradient(\n 90deg,\n #00ffcc,\n #00ffcc 3px,\n transparent 3px,\n transparent 6px\n );\n transform: rotateY(180deg) translateZ(20px);\n}\n\n.loader-face-right {\n background: radial-gradient(circle, #ffcc00 20%, transparent 20%),\n radial-gradient(circle, transparent 20%, #ffcc00 20%, transparent 30%);\n background-size: 15px 15px;\n background-position:\n 0 0,\n 7px 7px;\n transform: rotateY(90deg) translateZ(20px);\n}\n\n.loader-face-left {\n background: linear-gradient(135deg, #ff0066 25%, transparent 25%),\n linear-gradient(225deg, #ff0066 25%, transparent 25%),\n linear-gradient(315deg, #ff0066 25%, transparent 25%),\n linear-gradient(45deg, #ff0066 25%, transparent 25%);\n background-size: 10px 10px;\n transform: rotateY(-90deg) translateZ(20px);\n}\n\n.loader-face-top {\n background: conic-gradient(\n from 90deg at 50% 50%,\n #00ff99,\n #9900ff,\n #ff0099,\n #00ff99\n );\n transform: rotateX(90deg) translateZ(20px);\n}\n\n.loader-face-bottom {\n background: repeating-linear-gradient(\n 45deg,\n #ff6600,\n #ff6600 5px,\n #ffcc00 5px,\n #ffcc00 10px\n );\n transform: rotateX(-90deg) translateZ(20px);\n}\n\n@keyframes rotate-3d {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n 100% {\n transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);\n }\n}\n\n@keyframes pulse {\n 0% {\n transform: scale3d(0.8, 0.8, 0.8);\n }\n 100% {\n transform: scale3d(1.1, 1.1, 1.1);\n }\n}\n"}

tiny-lion-29

👁 实时预览

📝 源代码