{"html":"

\n \n

\n","css":".loader {\n --color-one: red;\n --color-two: blue;\n --color-three: yellow;\n --color-fore: cyan;\n --color-five: white;\n --time-animation: 1s;\n --size: 100px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: 50%;\n}\n\n.loader .sphere {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 50%;\n width: var(--size);\n height: var(--size);\n background: radial-gradient(\n circle at 80% 20%,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.8) 20%,\n rgba(255, 255, 255, 0.4) 50%,\n rgba(255, 255, 255, 0) 70%\n );\n}\n\n.loader .sphere::before {\n content: \"\";\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n box-shadow:\n inset calc(var(--size) / -20) calc(var(--size) / -20) calc(var(--size) / 10)\n var(--color-fore),\n inset calc(var(--size) / 10) 0 calc(var(--size) / 5) var(--color-three);\n animation:\n rotation calc(var(--time-animation) * 2) linear infinite,\n colorize calc(var(--time-animation) * 2) ease-in-out infinite;\n}\n\n.loader .sphere::after {\n content: \"\";\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n z-index: -1;\n background: radial-gradient(\n circle at 80% 20%,\n rgba(255, 255, 255, 0.7) 0%,\n rgba(255, 255, 255, 0.5) 30%,\n rgba(255, 255, 255, 0) 70%\n ),\n linear-gradient(120deg, var(--color-one) 20%, var(--color-two) 80%);\n animation:\n rotation calc(var(--time-animation) * 2) linear infinite,\n colorblur calc(var(--time-animation) * 2) ease-in-out infinite;\n}\n\n.loader svg {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--size);\n height: var(--size);\n animation: rotation calc(var(--time-animation) * 3)\n cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite;\n}\n\n.loader svg #shapes circle {\n fill: var(--color-five);\n}\n\n.loader svg #blurriness g,\n.loader svg #clipping ellipse,\n.loader svg #shapes g:nth-of-type(2),\n.loader svg #fade ellipse {\n filter: blur(7px);\n}\n\n.loader svg #waves g path {\n will-change: d;\n stroke-width: 7px;\n}\n\n.loader svg #waves g path:nth-of-type(1) {\n animation: wave-one var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4)\n infinite;\n}\n\n.loader svg #waves g path:nth-of-type(2) {\n animation: wave-two var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4)\n calc(var(--time-animation) / -2) infinite reverse;\n}\n\n.loader svg #waves g path:nth-of-type(3) {\n animation: wave-one var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4)\n calc(var(--time-animation) / -2) infinite;\n}\n\n.loader svg #waves g path:nth-of-type(4) {\n animation: wave-two var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4)\n infinite reverse;\n}\n\n@keyframes wave-one {\n 0% {\n d: path(\"M5,50 C10,50 15,50 20,50 C25,50 30,50 95,50\");\n }\n 50% {\n d: path(\"M5,50 C25,50 30,20 50,20 C70,20 75,50 95,50\");\n }\n 100% {\n d: path(\"M5,50 C70,50 75,50 80,50 C85,50 90,50 95,50\");\n }\n}\n\n@keyframes wave-two {\n 0% {\n d: path(\"M5,50 C10,50 15,50 20,50 C25,50 30,50 95,50\");\n }\n 50% {\n d: path(\"M5,50 C25,50 30,80 50,80 C70,80 75,50 95,50\");\n }\n 100% {\n d: path(\"M5,50 C70,50 75,50 80,50 C85,50 90,50 95,50\");\n }\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes colorize {\n 0% {\n filter: hue-rotate(0deg);\n }\n 20% {\n filter: hue-rotate(-30deg);\n }\n 40% {\n filter: hue-rotate(-60deg);\n }\n 60% {\n filter: hue-rotate(-90deg);\n }\n 80% {\n filter: hue-rotate(-45deg);\n }\n 100% {\n filter: hue-rotate(0deg);\n }\n}\n\n@keyframes colorblur {\n 0% {\n filter: hue-rotate(0deg) blur(calc(var(--size) / 15));\n }\n 20% {\n filter: hue-rotate(-30deg) blur(calc(var(--size) / 15));\n }\n 40% {\n filter: hue-rotate(-60deg) blur(calc(var(--size) / 15));\n }\n 60% {\n filter: hue-rotate(-90deg) blur(calc(var(--size) / 15));\n }\n 80% {\n filter: hue-rotate(-45deg) blur(calc(var(--size) / 15));\n }\n 100% {\n filter: hue-rotate(0deg) blur(calc(var(--size) / 15));\n }\n}\n"}

light-fireant-56

👁 实时预览

📝 源代码