{"html":"

\n","css":".loading-container {\n width: 300px;\n height: 150px;\n position: relative;\n overflow: hidden;\n}\n\n.ground {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 5px;\n background: linear-gradient(90deg, transparent, #555, transparent);\n animation: ground-move 2s linear infinite;\n}\n\n@keyframes ground-move {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n.skeleton {\n position: absolute;\n bottom: 12px;\n left: 0;\n width: 100px;\n height: 80px;\n animation: crawl 2s linear infinite;\n}\n\n@keyframes crawl {\n 0% {\n transform: translateX(-100px);\n }\n 100% {\n transform: translateX(300px);\n }\n}\n\n.head {\n position: absolute;\n top: 0;\n left: 30px;\n width: 30px;\n height: 30px;\n background-color: #fff;\n border-radius: 50%;\n animation: head-bob 0.5s ease-in-out infinite alternate;\n box-shadow: inset 0 -2px 0 #ccc;\n}\n\n@keyframes head-bob {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-5px);\n }\n}\n\n.eye {\n position: absolute;\n width: 5px;\n height: 5px;\n background-color: #222;\n border-radius: 50%;\n top: 11px;\n}\n\n.eye.left {\n left: 10px;\n}\n.eye.right {\n left: 20px;\n}\n\n.mouth {\n position: absolute;\n width: 12px;\n height: 5px;\n background-color: #222;\n border-radius: 0 0 5px 5px;\n top: 18px;\n left: 11px;\n animation: mouth-talk 0.5s ease-in-out infinite alternate;\n}\n\n@keyframes mouth-talk {\n 0% {\n height: 3px;\n }\n 100% {\n height: 6px;\n }\n}\n\n.body {\n position: absolute;\n top: 30px;\n left: 35px;\n width: 20px;\n height: 35px;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: inset 0 -2px 0 #ccc;\n}\n\n.arm {\n position: absolute;\n width: 10px;\n height: 35px;\n background-color: #fff;\n top: 30px;\n border-radius: 50px;\n box-shadow: inset 0 -2px 0 #ccc;\n}\n\n.arm.left {\n left: 25px;\n transform-origin: top center;\n animation: arm-left 1s ease-in-out infinite;\n}\n\n.arm.right {\n left: 55px;\n transform-origin: top center;\n animation: arm-right 1s ease-in-out infinite;\n}\n\n@keyframes arm-left {\n 0%,\n 100% {\n transform: rotate(30deg);\n }\n 50% {\n transform: rotate(-20deg);\n }\n}\n\n@keyframes arm-right {\n 0%,\n 100% {\n transform: rotate(-20deg);\n }\n 50% {\n transform: rotate(30deg);\n }\n}\n\n.leg {\n position: absolute;\n width: 10px;\n height: 40px;\n background-color: #fff;\n top: 60px;\n border-radius: 50px;\n box-shadow: inset 0 -2px 0 #ccc;\n}\n\n.leg.left {\n left: 35px;\n transform-origin: top center;\n animation: leg-left 1s ease-in-out infinite;\n}\n\n.leg.right {\n left: 45px;\n transform-origin: top center;\n animation: leg-right 1s ease-in-out infinite;\n}\n\n@keyframes leg-left {\n 0%,\n 100% {\n transform: rotate(10deg);\n }\n 50% {\n transform: rotate(-30deg);\n }\n}\n\n@keyframes leg-right {\n 0%,\n 100% {\n transform: rotate(-30deg);\n }\n 50% {\n transform: rotate(10deg);\n }\n}\n\n@keyframes dots {\n 0%,\n 20% {\n content: \".\";\n }\n 40% {\n content: \"..\";\n }\n 60%,\n 100% {\n content: \"...\";\n }\n}\n"}

fresh-mole-21

👁 实时预览

📝 源代码