{"html":"

∫

∑

∂

∞

√

\n","css":".loader * {\n box-sizing: border-box;\n}\n\n.loader {\n position: relative;\n width: 150px;\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: 50%;\n box-shadow:\n 0 0 0 1px rgba(255, 255, 255, 0.1),\n 0 0 20px rgba(0, 0, 0, 1);\n}\n\n.ring {\n position: absolute;\n border-radius: 50%;\n box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: blur(2px);\n transform-style: preserve-3d;\n}\n\n.ring::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.1);\n z-index: 1;\n}\n\n.outer {\n width: 140px;\n height: 140px;\n z-index: 10;\n animation: spin 12s linear infinite;\n}\n\n.outer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: 1px solid transparent;\n border-top-color: rgba(34, 211, 238, 0.8);\n border-right-color: rgba(34, 211, 238, 0.2);\n box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);\n z-index: 2;\n pointer-events: none;\n}\n\n.middle {\n width: 100px;\n height: 100px;\n z-index: 20;\n animation: spin 8s linear infinite reverse;\n}\n\n.middle::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: 1px solid transparent;\n border-left-color: rgba(168, 85, 247, 0.8);\n border-bottom-color: rgba(168, 85, 247, 0.2);\n box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);\n z-index: 2;\n pointer-events: none;\n}\n\n.inner {\n width: 60px;\n height: 60px;\n z-index: 30;\n animation: spin 4s linear infinite;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.05) 0%,\n transparent 60%\n );\n}\n\n.inner::before {\n border: 1px dashed rgba(255, 255, 255, 0.3);\n}\n\n.item {\n position: absolute;\n top: 50%;\n left: 50%;\n transform-origin: 0 0;\n z-index: 5;\n}\n\n.symbol {\n display: block;\n color: #fff;\n font-size: 1.2rem;\n font-weight: 400;\n text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);\n}\n\n.outer .item-1 {\n transform: rotate(0deg) translate(0, -70px);\n}\n\n.outer .item-2 {\n transform: rotate(120deg) translate(0, -70px);\n}\n\n.outer .item-3 {\n transform: rotate(240deg) translate(0, -70px);\n}\n\n.middle .item-1 {\n transform: rotate(0deg) translate(0, -50px);\n}\n\n.middle .item-2 {\n transform: rotate(180deg) translate(0, -50px);\n}\n\n.inner .item-1 {\n transform: rotate(90deg) translate(0, -30px);\n}\n\n.inner .item-2 {\n transform: rotate(270deg) translate(0, -30px);\n}\n\n@keyframes spin-reverse-0 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(-360deg);\n }\n}\n\n@keyframes spin-reverse-120 {\n from {\n transform: rotate(-120deg);\n }\n\n to {\n transform: rotate(-480deg);\n }\n}\n\n@keyframes spin-reverse-240 {\n from {\n transform: rotate(-240deg);\n }\n\n to {\n transform: rotate(-600deg);\n }\n}\n\n.outer .item-1 .symbol {\n animation: spin-reverse-0 12s linear infinite;\n}\n\n.outer .item-2 .symbol {\n animation: spin-reverse-120 12s linear infinite;\n}\n\n.outer .item-3 .symbol {\n animation: spin-reverse-240 12s linear infinite;\n}\n\n@keyframes spin-forward-0 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin-forward-180 {\n from {\n transform: rotate(-180deg);\n }\n\n to {\n transform: rotate(180deg);\n }\n}\n\n.middle .item-1 .symbol {\n animation: spin-forward-0 8s linear infinite;\n}\n\n.middle .item-2 .symbol {\n animation: spin-forward-180 8s linear infinite;\n}\n\n@keyframes spin-reverse-90 {\n from {\n transform: rotate(-90deg);\n }\n\n to {\n transform: rotate(-450deg);\n }\n}\n\n@keyframes spin-reverse-270 {\n from {\n transform: rotate(-270deg);\n }\n\n to {\n transform: rotate(-630deg);\n }\n}\n\n.inner .item-1 .symbol {\n animation: spin-reverse-90 4s linear infinite;\n}\n\n.inner .item-2 .symbol {\n animation: spin-reverse-270 4s linear infinite;\n}\n\n.core {\n position: absolute;\n width: 8px;\n height: 8px;\n background: #fff;\n border-radius: 50%;\n box-shadow:\n 0 0 5px #fff,\n 0 0 15px #22d3ee,\n 0 0 30px #a855f7;\n z-index: 10;\n animation: heartbeat-core 4s ease-in-out infinite;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes heartbeat-core {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 5% {\n transform: scale(1.1);\n opacity: 0.9;\n }\n\n 10% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 15% {\n transform: scale(1.4);\n opacity: 1;\n box-shadow:\n 0 0 10px #fff,\n 0 0 25px #22d3ee;\n }\n\n 20% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 25% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 30% {\n transform: scale(1.1);\n opacity: 0.9;\n }\n\n 35% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 40% {\n transform: scale(1.4);\n opacity: 1;\n box-shadow:\n 0 0 10px #fff,\n 0 0 25px #22d3ee;\n }\n\n 45% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 50% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 55% {\n transform: scale(1.1);\n opacity: 0.9;\n }\n\n 60% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 65% {\n transform: scale(1.4);\n opacity: 1;\n box-shadow:\n 0 0 10px #fff,\n 0 0 25px #22d3ee;\n }\n\n 70% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 75% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 80% {\n transform: scale(0.9);\n opacity: 0.6;\n }\n\n 82% {\n transform: scale(1.3);\n opacity: 0.9;\n }\n\n 84% {\n transform: scale(0.9);\n opacity: 0.6;\n }\n\n 86% {\n transform: scale(1.7);\n opacity: 1;\n box-shadow:\n 0 0 15px #fff,\n 0 0 40px #a855f7;\n }\n\n 90% {\n transform: scale(1);\n opacity: 0.8;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.8;\n }\n}\n\n@keyframes grid-move {\n 0% {\n background-position:\n center center,\n 0 0,\n 0 0;\n }\n\n 100% {\n background-position:\n center center,\n 0 30px,\n 0 30px;\n }\n}\n"}

hard-penguin-57

👁 实时预览

📝 源代码