{"html":"

On your way...

\n","css":".preloader {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 500px;\n}\n\n.spinner {\n width: 100px;\n height: 100px;\n position: relative;\n animation: spinner 1.6s infinite ease;\n transform-style: preserve-3d;\n}\n\n.spinner > div {\n background-color: rgba(229, 197, 159, 0.1);\n height: 100%;\n position: absolute;\n width: 100%;\n border: 4px solid rgb(229, 197, 159);\n border-radius: 50%;\n}\n\n.spinner div:nth-of-type(1) {\n transform: translateZ(-35px) rotateY(180deg);\n}\n\n.spinner div:nth-of-type(2) {\n transform: rotateY(-270deg) translateX(50%);\n transform-origin: top right;\n}\n\n.spinner div:nth-of-type(3) {\n transform: rotateY(270deg) translateX(-50%);\n transform-origin: center left;\n}\n\n.spinner div:nth-of-type(4) {\n transform: rotateX(90deg) translateY(-50%);\n transform-origin: top center;\n}\n\n.spinner div:nth-of-type(5) {\n transform: rotateX(-90deg) translateY(50%);\n transform-origin: bottom center;\n}\n\n.spinner div:nth-of-type(6) {\n transform: translateZ(35px);\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg) rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: rotate(180deg) rotateX(180deg) rotateY(180deg);\n }\n 100% {\n transform: rotate(360deg) rotateX(360deg) rotateY(360deg);\n }\n}\n\n.text {\n font-family: \"Trebuchet MS\", \"Lucida Sans Unicode\", \"Lucida Grande\",\n \"Lucida Sans\", Arial, sans-serif;\n font-size: 24px;\n background: linear-gradient(to right, #925555, #e0a47c, #d33fd3, #eed600);\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n padding-top: 20px;\n text-align: center;\n}\n"}

nervous-ladybug-34

👁 实时预览

📝 源代码