{"html":"

\n \n

\n ","css":".loader {\n display: block;\n width: 8em;\n height: 8em;\n}\n\n.loader_ring {\n stroke: hsla(var(--hue), 90%, 5%, 0.1);\n transition: stroke 0.3s;\n}\n\n.loader_worm1,\n .loader_worm2,\n .loader_worm2-1 {\n animation: worm1 5s ease-in infinite;\n}\n\n.loader_worm1 {\n transform-origin: 64px 64px;\n}\n\n.loader_worm2,\n .loader_worm2-1 {\n transform-origin: 22px 22px;\n}\n\n.loader_worm2 {\n animation-name: worm2;\n animation-timing-function: linear;\n}\n\n.loader_worm2-1 {\n animation-name: worm2-1;\n stroke-dashoffset: 175.92;\n}\n\n /* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue), 90%, 5%);\n --fg: hsl(var(--hue), 90%, 95%);\n }\n\n .loader_ring {\n stroke: hsla(var(--hue), 90%, 95%, 0.1);\n }\n}\n\n /* Animations */\n@keyframes worm1 {\n from,\n to {\n stroke-dashoffset: 0;\n }\n\n 12.5% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -175.91;\n }\n\n 25% {\n animation-timing-function: cubic-bezier(0, 0, 0.43, 1);\n stroke-dashoffset: -307.88;\n }\n\n 50% {\n animation-timing-function: ease-in;\n stroke-dashoffset: -483.8;\n }\n\n 62.5% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -307.88;\n }\n\n 75% {\n animation-timing-function: cubic-bezier(0, 0, 0.43, 1);\n stroke-dashoffset: -175.91;\n }\n}\n\n@keyframes worm2 {\n from,\n 12.5%,\n 75%,\n to {\n transform: rotate(0) translate(-42px, 0);\n }\n\n 25%,\n 62.5% {\n transform: rotate(0.5turn) translate(-42px, 0);\n }\n}\n\n@keyframes worm2-1 {\n from {\n stroke-dashoffset: 175.91;\n transform: rotate(0);\n }\n\n 12.5% {\n animation-timing-function: cubic-bezier(0, 0, 0.42, 1);\n stroke-dashoffset: 0;\n transform: rotate(0);\n }\n\n 25% {\n animation-timing-function: linear;\n stroke-dashoffset: 0;\n transform: rotate(1.5turn);\n }\n\n 37.5%,\n 50% {\n stroke-dashoffset: -175.91;\n transform: rotate(1.5turn);\n }\n\n 62.5% {\n animation-timing-function: cubic-bezier(0, 0, 0.42, 1);\n stroke-dashoffset: 0;\n transform: rotate(1.5turn);\n }\n\n 75% {\n animation-timing-function: linear;\n stroke-dashoffset: 0;\n transform: rotate(0);\n }\n\n 87.5%,\n to {\n stroke-dashoffset: 175.92;\n transform: rotate(0);\n }\n}"}

terrible-snake-34

👁 实时预览

📝 源代码