{"html":"

\n","css":".loader {\n --c1: #ffbf48;\n --c2: #be4a1d;\n --t: 2s;\n --size: 1;\n position: relative;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n transform: scale(var(--size));\n box-shadow:\n 0 0 25px 0 #ffbf4780,\n 0 20px 50px 0 #bf4a1d80;\n animation: colorize calc(var(--t) * 3) ease-in-out infinite;\n overflow: hidden;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border-top: 1px solid var(--c1);\n border-bottom: 1px solid var(--c2);\n background: linear-gradient(180deg, #ffbf4740, #bf4a1d80);\n box-shadow:\n inset 0 10px 10px 0 #ffbf4780,\n inset 0 -10px 10px 0 #bf4a1d80;\n}\n\n.loader-inner {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n overflow: hidden;\n filter: url('data:image/svg+xml,#g');\n -webkit-filter: url('data:image/svg+xml,#g');\n}\n\n.blob {\n position: absolute;\n border-radius: 42%;\n background: linear-gradient(180deg, var(--c1) 30%, var(--c2) 70%);\n}\n\n.b1 {\n width: 44px;\n height: 44px;\n top: 12px;\n left: 28px;\n transform-origin: 50% 130%;\n animation: spin var(--t) linear infinite reverse;\n}\n\n.b2 {\n width: 40px;\n height: 40px;\n top: 18px;\n left: 30px;\n transform-origin: 50% -30%;\n animation: spin var(--t) linear infinite;\n animation-delay: calc(var(--t) / -3);\n}\n\n.b3 {\n width: 30px;\n height: 30px;\n top: 28px;\n left: 35px;\n transform-origin: -30% -10%;\n animation: spin var(--t) linear infinite reverse;\n}\n\n.b4 {\n width: 28px;\n height: 28px;\n top: 30px;\n left: 36px;\n transform-origin: -30% -10%;\n animation: spin var(--t) linear infinite reverse;\n animation-delay: calc(var(--t) / -2);\n}\n\n.b5 {\n width: 30px;\n height: 30px;\n top: 28px;\n left: 35px;\n transform-origin: 130% -10%;\n animation: spin var(--t) linear infinite;\n}\n\n.b6 {\n width: 28px;\n height: 28px;\n top: 30px;\n left: 36px;\n transform-origin: 130% -10%;\n animation: spin var(--t) linear infinite;\n animation-delay: calc(var(--t) / -1.5);\n}\n\n@keyframes spin {\n to {\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"}

tall-turkey-48

👁 实时预览

📝 源代码