{"html":"

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

\n","css":".loader {\n --size: 130px;\n --zoom: 0.6;\n --bg-blend-mode: difference;\n --min-deg: 1deg;\n --max-deg: 2deg;\n --general-gradient: repeating-conic-gradient(\n from 0deg at 0% 0%,\n #fff 0 var(--min-deg),\n magenta var(--min-deg) var(--max-deg)\n ),\n repeating-conic-gradient(\n from 0deg at 100% 0%,\n #fff 0 var(--min-deg),\n magenta var(--min-deg) var(--max-deg)\n ),\n repeating-conic-gradient(\n from 0deg at 100% 100%,\n #fff 0 var(--min-deg),\n magenta var(--min-deg) var(--max-deg)\n ),\n repeating-conic-gradient(\n from 0deg at 0% 100%,\n #fff 0 var(--min-deg),\n magenta var(--min-deg) var(--max-deg)\n );\n\n width: var(--size);\n height: var(--size);\n zoom: var(--zoom);\n position: relative;\n perspective: 10000px;\n transform-style: preserve-3d;\n animation: rotar 20s linear infinite alternate both;\n\n &:hover {\n .side,\n .base {\n filter: brightness(200%);\n }\n }\n\n .side,\n .base {\n transition: filter 0.4s ease;\n /* filter: brightness(500%) invert(1); */\n }\n\n .base {\n width: 100%;\n height: 100%;\n position: absolute;\n clip-path: polygon(\n 0% 25%,\n 25% 0,\n 75% 0,\n 100% 25%,\n 100% 75%,\n 75% 100%,\n 25% 100%,\n 0% 75%\n );\n transform-origin: 50% 0;\n transform: rotateX(-90deg);\n background-image: var(--general-gradient);\n background-blend-mode: var(--bg-blend-mode);\n\n &.base-top {\n top: 0;\n }\n\n &.base-bottom {\n top: 180%;\n }\n }\n\n .side {\n position: absolute;\n width: 50%;\n height: 180%;\n left: 50%;\n top: 0;\n background-image: var(--general-gradient);\n background-blend-mode: var(--bg-blend-mode);\n\n &.side-1 {\n transform: translateX(-50%) translateZ(-130px);\n }\n\n &.side-2 {\n width: 35%;\n transform-origin: 100% 0%;\n transform: translateX(-28%) translateZ(-130px) rotateY(135deg);\n }\n\n &.side-3 {\n width: 35%;\n transform-origin: 0% 0%;\n transform: translateX(-71%) translateZ(-130px) rotateY(-135deg);\n }\n\n &.side-4 {\n transform: translateX(50%) translateZ(-65px) rotateY(90deg);\n }\n\n &.side-5 {\n transform: translateX(-150%) translateZ(-65px) rotateY(90deg);\n }\n\n &.side-6 {\n width: 35%;\n transform-origin: 100% 0%;\n transform: translateX(-28%) rotateY(-135deg);\n }\n\n &.side-7 {\n width: 35%;\n transform-origin: 0% 0%;\n transform: translateX(-71%) rotateY(135deg);\n }\n\n &.side-8 {\n transform: translateX(-50%);\n }\n }\n}\n\n@keyframes rotar {\n 0% {\n transform: rotateX(-360deg) rotateY(-360deg);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}

polite-rabbit-73

👁 实时预览

📝 源代码