{"html":"

\n \n \n \n \n \n \n \n

\n","css":".loader {\n --size: 120px;\n width: var(--size);\n height: var(--size);\n zoom: 0.6;\n position: relative;\n animation: girar 8s linear infinite alternate both;\n\n &,\n .cube,\n .side {\n transform-style: preserve-3d;\n perspective: 10000px;\n }\n\n .cube {\n width: 120px;\n height: 120px;\n position: absolute;\n\n .side {\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: #000;\n overflow: hidden;\n top: 0;\n left: 0;\n\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(45deg, #60efff, #00ff87, #e81cff);\n filter: blur(50px);\n }\n\n &.front {\n transform: none;\n }\n\n &.behind {\n transform: translateZ(-120px);\n }\n\n &.right {\n transform-origin: 100% 0%;\n transform: rotateY(-90deg);\n }\n\n &.left {\n transform-origin: 0% 0%;\n transform: rotateY(90deg);\n }\n\n &.top {\n transform-origin: 50% 0%;\n transform: rotateX(-90deg);\n }\n &.bottom {\n transform-origin: 50% 100%;\n transform: rotateX(90deg);\n }\n }\n }\n\n .triangle {\n width: 120px;\n height: 120px;\n position: absolute;\n bottom: 118px;\n transform-style: preserve-3d;\n perspective: 10000px;\n\n &.triangle-top {\n bottom: -118px;\n transform: scale3d(-1, -1, -1) translateZ(118px);\n }\n\n &.triangle-right {\n left: 118px;\n bottom: 0;\n transform: rotate(-90deg) scaleY(-1) scaleX(-1);\n }\n\n &.triangle-left {\n left: -118px;\n bottom: 0;\n transform: rotate(-90deg) scaleX(-1);\n }\n\n &.triangle-frontend {\n bottom: -1px;\n transform: rotate(90deg) rotateX(-90deg) translate(0px, -61px)\n translateZ(-116px);\n left: -175px;\n }\n\n &.triangle-backend {\n bottom: -36px;\n transform: rotate(90deg) rotateX(-90deg) scaleY(-1)\n translate(-36px, -178px) translateZ(253px);\n left: 194px;\n }\n\n .side {\n transform-style: preserve-3d;\n perspective: 10000px;\n width: 100%;\n height: 100%;\n clip-path: polygon(50% 0, 100% 100%, 0 100%);\n position: absolute;\n\n &.front,\n &.behind {\n transform-origin: 50% 100%;\n }\n\n &.front {\n background-color: #fff8;\n transform: rotateX(30deg);\n }\n\n &.behind {\n background-color: #00f8;\n transform: translateZ(-120px) rotateX(-30deg);\n }\n\n &.right {\n transform-origin: 100% 100%;\n transform: rotateY(-90deg) rotateX(-30deg);\n background-color: #f0f8;\n }\n &.left {\n transform-origin: 0% 100%;\n transform: rotateY(90deg) rotateX(-30deg);\n background-color: #0f08;\n }\n }\n }\n}\n\n@keyframes girar {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(359deg) rotateY(359deg);\n }\n}\n"}

stale-rat-76

👁 实时预览

📝 源代码