{"html":"

\n\n

\n","css":".loader {\n zoom: 0.5;\n\n .container {\n width: 180px;\n height: 150px;\n perspective: 10000px;\n transform-style: preserve-3d;\n position: relative;\n animation: rotar 30s linear infinite alternate both;\n\n &.container-bottom {\n position: absolute;\n animation: none;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-360deg);\n }\n\n &.container-2 {\n top: 20px;\n transform: translate(-50%, -50%) rotate(180deg);\n }\n\n .base {\n width: 100%;\n height: 100%;\n clip-path: polygon(\n 0% 50%,\n 25% 0,\n 75% 0,\n 100% 50%,\n 75% 100%,\n 25% 100%,\n 0% 50%\n );\n position: absolute;\n transform-origin: 50% 0;\n transform: rotateX(-90deg);\n\n &.base-top {\n background-color: #fff4;\n top: 0;\n }\n }\n\n .side {\n position: absolute;\n width: 49.5%;\n left: 50%;\n height: 180%;\n clip-path: polygon(0 0, 100% 0, 50% 100%);\n --rotate-x-general: 35deg;\n --rotate-x-general-negative: calc(-1 * var(--rotate-x-general));\n background-image: radial-gradient(\n circle at 100% 100%,\n magenta,\n mediumturquoise,\n mediumslateblue\n );\n\n &.side-1 {\n background-color: #0f08;\n transform-origin: 50% 0;\n transform: translateX(-50%) translateZ(-150px)\n rotateX(var(--rotate-x-general));\n }\n &.side-2 {\n background-color: #00f8;\n width: 49%;\n transform-origin: 100% 0%;\n transform: translateX(-50%) translateZ(-150px) rotateY(-239deg)\n rotateX(var(--rotate-x-general-negative));\n }\n &.side-3 {\n background-color: #f008;\n width: 49%;\n transform-origin: 0% 0%;\n transform: translateX(-50%) translateZ(-150px) rotateY(239deg)\n rotateX(var(--rotate-x-general-negative));\n }\n &.side-4 {\n background-color: #ff08;\n width: 49%;\n transform-origin: 0% 0%;\n transform: translateX(-50%) rotateY(-239deg)\n rotateX(var(--rotate-x-general));\n }\n &.side-5 {\n background-color: #0ff8;\n width: 49%;\n transform-origin: 100% 0%;\n transform: translateX(-50%) rotateY(239deg)\n rotateX(var(--rotate-x-general));\n }\n\n &.side-6 {\n background-color: #0f04;\n transform-origin: 50% 0;\n transform: translateX(-50%) rotateX(var(--rotate-x-general-negative));\n }\n }\n }\n}\n\n@keyframes rotar {\n 0% {\n transform: rotateX(-738deg) rotateY(-738deg);\n }\n 100% {\n transform: rotateX(738deg) rotateY(738deg);\n }\n}\n"}

happy-fox-37

👁 实时预览

📝 源代码