{"html":"

\n","css":"/*********/\n/* Style */\n/*********/\n\n/* Nucleus */\n/***********/\n\n/* Nucleus - Base */\n.loader {\n --float: 5%;\n --radius: 2rem;\n\n background: #f33;\n border-radius: var(--radius);\n height: var(--radius);\n position: relative;\n width: var(--radius);\n}\n/* Nucleus - Lighting */\n.loader::after {\n --light-x: 30%;\n --light-y: 25%;\n --light-radius: 3%;\n\n background: radial-gradient(\n circle at var(--light-x) var(--light-y),\n rgba(255, 255, 255, 1),\n transparent calc(1 * var(--light-radius))\n ),\n radial-gradient(\n circle at var(--light-x) var(--light-y),\n rgba(255, 255, 255, 0.8),\n transparent calc(2 * var(--light-radius))\n ),\n radial-gradient(\n circle at var(--light-x) var(--light-y),\n rgba(255, 255, 255, 0.6),\n transparent calc(3 * var(--light-radius))\n ),\n radial-gradient(\n circle at var(--light-x) var(--light-y),\n rgba(255, 255, 255, 0.4),\n transparent calc(4 * var(--light-radius))\n ),\n radial-gradient(\n circle at var(--light-x) var(--light-y),\n rgba(255, 255, 255, 0.2),\n transparent calc(5 * var(--light-radius))\n );\n border-radius: inherit;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n/* Electrons */\n/*************/\n\n/* Electrons - Container */\n.loader-orbits {\n --color-line: #fff;\n --color-glow: #0ff;\n --electron-nb: 3;\n --radius: 500%;\n\n border-radius: var(--radius);\n filter: drop-shadow(0 0 0.3rem var(--color-glow));\n height: var(--radius);\n left: calc(50% - var(--radius) / 2);\n position: absolute;\n top: calc(50% - var(--radius) / 2);\n width: var(--radius);\n}\n\n/* Electrons - Base */\n.loader-orbits__electron {\n --clip-radius: 20%;\n --radius: 100%;\n --ratio: 4;\n\n border-radius: var(--radius);\n height: calc(var(--radius) / var(--ratio));\n left: calc(50% - var(--radius) / 2);\n position: absolute;\n top: calc(50% - var(--radius) / (var(--ratio) * 2));\n transform: rotateZ(calc(var(--index) * 180deg / var(--electron-nb)));\n width: var(--radius);\n z-index: 100;\n}\n/* Electrons - Light */\n.loader-orbits__electron::before,\n.loader-orbits__electron::after {\n border-radius: inherit;\n box-shadow: inset 0 var(--offset-direction) 0 0.02rem var(--color-line);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.loader-orbits__electron::before {\n --offset-direction: 0.1rem;\n}\n.loader-orbits__electron::after {\n --offset-direction: -0.1rem;\n}\n\n/* Electrons - Mapping */\n.loader-orbits__electron:nth-child(1) {\n --index: 0;\n}\n.loader-orbits__electron:nth-child(2) {\n --index: 1;\n}\n.loader-orbits__electron:nth-child(3) {\n --index: 2;\n}\n\n/****************/\n/* Interactions */\n/****************/\n\n/* Atom */\n.loader {\n animation-name: floatAtom;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n\n/* Electrons */\n.loader-orbits__electron {\n animation-name: orbitElectron;\n animation-delay: calc((var(--index) + 1) * 0.5s / var(--electron-nb));\n animation-duration: 0.5s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n\n/**************/\n/* Animations */\n/**************/\n\n/* Atom - Makes the atom float */\n@keyframes floatAtom {\n 0% {\n transform: translateY(calc(-1 * var(--float)));\n }\n\n 25% {\n transform: translateY(calc(-2 * var(--float)));\n }\n\n 50% {\n transform: translateY(calc(-1 * var(--float)));\n }\n\n 75% {\n transform: translateY(calc(0 * var(--float)));\n }\n\n 100% {\n transform: translateY(calc(-1 * var(--float)));\n }\n}\n\n/* Electrons - Makes the electron's light orbit around the center */\n@keyframes orbitElectron {\n 0% {\n clip-path: ellipse(\n calc(2 * var(--clip-radius)) var(--clip-radius) at 50% 0\n );\n }\n\n 25% {\n clip-path: ellipse(\n calc(2 * var(--clip-radius)) var(--clip-radius) at 0 50%\n );\n }\n\n 50% {\n clip-path: ellipse(\n calc(2 * var(--clip-radius)) var(--clip-radius) at 50% 100%\n );\n }\n\n 75% {\n clip-path: ellipse(\n calc(2 * var(--clip-radius)) var(--clip-radius) at 100% 50%\n );\n }\n\n 100% {\n clip-path: ellipse(\n calc(2 * var(--clip-radius)) var(--clip-radius) at 50% 0\n );\n }\n}\n"}

swift-insect-41

👁 实时预览

📝 源代码