{"html":"

\n","css":".container {\n position: absolute;\n inset: 0;\n zoom: 0.5;\n\n .loader {\n top: calc(50% - 200px);\n left: calc(50% - 200px);\n animation: girar 8s linear infinite;\n\n &,\n .sphere,\n .item {\n width: 400px;\n height: 400px;\n position: absolute;\n transform-style: preserve-3d;\n perspective: 10000px;\n }\n\n .sphere,\n .item {\n top: 0;\n left: 0;\n }\n\n .sphere {\n transform: rotate(calc(var(--rot) * 20deg));\n\n &.sphere1 {\n --bg: #f008;\n }\n\n &.sphere2 {\n --bg: #f0f8;\n }\n\n &.sphere3 {\n --bg: #ff08;\n }\n\n &.sphere4 {\n --bg: #0f08;\n }\n\n &.sphere5 {\n --bg: #0ff8;\n }\n\n &.sphere6 {\n --bg: #00f8;\n }\n\n &.sphere7 {\n --bg: #dc1ddf88;\n }\n\n &.sphere8 {\n --bg: #ffa50088;\n }\n\n &.sphere8 {\n --bg: #e5b2ca88;\n }\n }\n\n .item {\n border-radius: 50%;\n background: var(--bg);\n transform: rotateY(calc(var(--rot-y) * 40deg));\n }\n }\n}\n\n@keyframes girar {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}

modern-termite-44

👁 实时预览

📝 源代码