{"html":"

\n","css":".loader-page {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #282c34;\n overflow: hidden;\n font-family: \"Inter\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\n.container {\n perspective: 1000px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.spinner {\n position: relative;\n width: 120px;\n height: 120px;\n transform-style: preserve-3d;\n animation: rotateSpinner 10s infinite linear;\n}\n\n.circle {\n position: absolute;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 5px solid transparent;\n border-top-color: #61dafb;\n border-bottom-color: #61dafb;\n animation: spinCircle 1.5s infinite linear;\n}\n\n.circle:nth-child(1) {\n transform: rotateX(70deg) rotateY(0deg);\n animation-delay: 0s;\n}\n\n.circle:nth-child(2) {\n transform: rotateX(70deg) rotateY(90deg);\n animation-delay: -0.3s;\n}\n\n.circle:nth-child(3) {\n transform: rotateX(70deg) rotateY(180deg);\n animation-delay: -0.6s;\n}\n\n.circle:nth-child(4) {\n transform: rotateX(70deg) rotateY(270deg);\n animation-delay: -0.9s;\n}\n\n@keyframes rotateSpinner {\n 0% {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n\n@keyframes spinCircle {\n 0% {\n transform: rotateX(70deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(70deg) rotateY(360deg);\n }\n}\n\n@media (max-width: 768px) {\n .spinner {\n width: 100px;\n height: 100px;\n }\n .circle {\n width: 80px;\n height: 80px;\n border-width: 4px;\n }\n}\n\n@media (max-width: 480px) {\n .spinner {\n width: 80px;\n height: 80px;\n }\n .circle {\n width: 60px;\n height: 60px;\n border-width: 3px;\n }\n}\n"}

rare-wombat-88

👁 实时预览

📝 源代码