{"html":"

\n","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n animation: pulse 2s infinite ease-in-out;\n}\n\n.ring {\n position: absolute;\n width: 190px;\n height: 190px;\n border: px solid transparent;\n border-radius: 50%;\n --color: #fe53bb;\n border-bottom: 8px solid var(--color);\n animation: rotate1 1s ease-in-out infinite;\n box-shadow: 0 0 4px #8e8e8e;\n}\n\n@keyframes rotate1 {\n from {\n transform: rotateX(50deg) rotateZ(110deg);\n }\n to {\n transform: rotateX(50deg) rotateZ(470deg);\n }\n}\n\n.ring:nth-child(2) {\n --color: #8f51ea;\n animation-name: rotate2;\n}\n\n@keyframes rotate2 {\n from {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);\n }\n to {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);\n }\n}\n\n.ring:nth-child(3) {\n --color: #0044ff;\n animation-name: rotate3;\n}\n\n@keyframes rotate3 {\n from {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);\n }\n to {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);\n }\n}\n\n.ring:nth-child(4) {\n --color: #fe53bb;\n animation-name: rotate4;\n width: 380px;\n height: 380px;\n border: 2px solid transparent;\n border-bottom: 16px solid var(--color);\n}\n\n@keyframes rotate4 {\n from {\n transform: rotateX(50deg) rotateZ(470deg);\n }\n to {\n transform: rotateX(50deg) rotateZ(110deg);\n }\n}\n\n.ring:nth-child(5) {\n --color: #8f51ea;\n animation-name: rotate5;\n width: 380px;\n height: 380px;\n border: 2px solid transparent;\n border-bottom: 16px solid var(--color);\n}\n\n@keyframes rotate5 {\n from {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);\n }\n to {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);\n }\n}\n\n.ring:nth-child(6) {\n --color: #0044ff;\n animation-name: rotate6;\n width: 380px;\n height: 380px;\n border: 2px solid transparent;\n border-bottom: 16px solid var(--color);\n}\n\n@keyframes rotate6 {\n from {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);\n }\n to {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);\n }\n}\n\n/* Pulsing animation for nucleus */\n@keyframes pulse {\n 0%,\n 100% {\n transform: translate(-50%, -50%) scale(1);\n box-shadow:\n 0 0 20px #fe53bb,\n 0 0 40px #8f51ea;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.2);\n box-shadow:\n 0 0 30px #fe53bb,\n 0 0 60px #8f51ea;\n }\n}\n\n.nucleus {\n width: 20px;\n height: 20px;\n background: radial-gradient(circle, #fe53bb, #8f51ea);\n border-radius: 50%;\n box-shadow:\n 0px 0 20px #fe53bb,\n 0 0 40px #8f51ea;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: pulse 1s ease-in-out infinite;\n}\n"}

tame-sloth-13

👁 实时预览

📝 源代码