{"html":"

\n","css":".capybaraloader {\n width: 14em;\n height: 10em;\n position: relative;\n z-index: 1;\n --color: rgb(204, 125, 45);\n --color2: rgb(83, 56, 28);\n transform: scale(0.75);\n}\n.capybara {\n width: 100%;\n height: 7.5em;\n position: relative;\n z-index: 1;\n}\n.loader {\n width: 100%;\n height: 2.5em;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n.capy {\n width: 85%;\n height: 100%;\n background: linear-gradient(var(--color), 90%, var(--color2));\n border-radius: 45%;\n position: relative;\n z-index: 1;\n animation: movebody 1s linear infinite;\n}\n.capyhead {\n width: 7.5em;\n height: 7em;\n bottom: 0em;\n right: 0em;\n position: absolute;\n background-color: var(--color);\n z-index: 3;\n border-radius: 3.5em;\n box-shadow: -1em 0em var(--color2);\n animation: movebody 1s linear infinite;\n}\n.capyear {\n width: 2em;\n height: 2em;\n background: linear-gradient(-45deg, var(--color), 90%, var(--color2));\n top: 0em;\n left: 0em;\n border-radius: 100%;\n position: absolute;\n overflow: hidden;\n z-index: 3;\n}\n.capyear:nth-child(2) {\n left: 5em;\n background: linear-gradient(25deg, var(--color), 90%, var(--color2));\n}\n.capyear2 {\n width: 100%;\n height: 1em;\n background-color: var(--color2);\n bottom: 0em;\n left: 0.5em;\n border-radius: 100%;\n position: absolute;\n transform: rotate(-45deg);\n}\n.capymouth {\n width: 3.5em;\n height: 2em;\n background-color: var(--color2);\n position: absolute;\n bottom: 0em;\n left: 2.5em;\n border-radius: 50%;\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 0.5em;\n}\n.capylips {\n width: 0.25em;\n height: 0.75em;\n border-radius: 100%;\n transform: rotate(-45deg);\n background-color: var(--color);\n}\n.capylips:nth-child(2) {\n transform: rotate(45deg);\n}\n.capyeye {\n width: 2em;\n height: 0.5em;\n background-color: var(--color2);\n position: absolute;\n bottom: 3.5em;\n left: 1.5em;\n border-radius: 5em;\n transform: rotate(45deg);\n}\n.capyeye:nth-child(4) {\n transform: rotate(-45deg);\n left: 5.5em;\n width: 1.75em;\n}\n.capyleg {\n width: 6em;\n height: 5em;\n bottom: 0em;\n left: 0em;\n position: absolute;\n background: linear-gradient(var(--color), 95%, var(--color2));\n z-index: 2;\n border-radius: 2em;\n animation: movebody 1s linear infinite;\n}\n.capyleg2 {\n width: 1.75em;\n height: 3em;\n bottom: 0em;\n left: 3.25em;\n position: absolute;\n background: linear-gradient(var(--color), 80%, var(--color2));\n z-index: 2;\n border-radius: 0.75em;\n box-shadow: inset 0em -0.5em var(--color2);\n animation: moveleg 1s linear infinite;\n}\n.capyleg2:nth-child(3) {\n width: 1.25em;\n left: 0.5em;\n height: 2em;\n animation: moveleg2 1s linear infinite 0.075s;\n}\n\n@keyframes moveleg {\n 0% {\n transform: rotate(-45deg) translateX(-5%);\n }\n 50% {\n transform: rotate(45deg) translateX(5%);\n }\n 100% {\n transform: rotate(-45deg) translateX(-5%);\n }\n}\n\n@keyframes moveleg2 {\n 0% {\n transform: rotate(45deg);\n }\n 50% {\n transform: rotate(-45deg);\n }\n 100% {\n transform: rotate(45deg);\n }\n}\n\n@keyframes movebody {\n 0% {\n transform: translateX(0%);\n }\n 50% {\n transform: translateX(2%);\n }\n 100% {\n transform: translateX(0%);\n }\n}\n\n.loaderline {\n width: 50em;\n height: 0.5em;\n border-top: 0.5em dashed var(--color2);\n animation: moveline 10s linear infinite;\n}\n\n@keyframes moveline {\n 0% {\n transform: translateX(0%);\n opacity: 0%;\n }\n 5% {\n opacity: 100%;\n }\n 95% {\n opacity: 100%;\n }\n 100% {\n opacity: 0%;\n transform: translateX(-70%);\n }\n}\n"}

kind-snail-5

👁 实时预览

📝 源代码