{"html":"\n","css":".loader {\n --purple: #b429f999;\n --size: 170px;\n width: var(--size);\n height: var(--size);\n zoom: 0.5;\n position: relative;\n transform-style: preserve-3d;\n perspective: 10000px;\n animation: rotar 12s linear infinite alternate both;\n\n .base {\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--purple);\n transform-origin: 50% 0;\n transform: rotateX(-90deg);\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n\n &.top {\n top: 0;\n }\n\n &.bottom {\n top: 150%;\n }\n }\n\n .side {\n width: 64%;\n height: 150%;\n position: absolute;\n }\n\n .side1 {\n background-color: #fff8;\n top: 0%;\n left: 50%;\n transform: translateX(-50%) translateZ(-170px);\n }\n .side2 {\n background-color: #f008;\n top: 0%;\n left: 50%;\n transform-origin: 100% 0%;\n transform: translateX(-50%) translateZ(-170px) rotateY(106deg);\n }\n .side3 {\n background-color: #0f08;\n top: 0%;\n left: 50%;\n transform-origin: 0% 0%;\n transform: translateX(-50%) translateZ(-170px) rotateY(-106deg);\n }\n .side4 {\n background-color: #ff08;\n top: 0%;\n left: 50%;\n width: 63%;\n transform-origin: 0% 0%;\n transform: rotateY(143deg);\n }\n .side5 {\n background-color: #00f8;\n top: 0%;\n left: 50%;\n width: 63%;\n transform-origin: 0% 0%;\n transform: rotateY(398deg);\n }\n}\n\n@keyframes rotar {\n 0% {\n transform: rotateX(-369deg) rotateY(-369deg);\n }\n 100% {\n transform: rotateX(369deg) rotateY(369deg);\n }\n}\n"}

grumpy-liger-81

👁 实时预览

📝 源代码