{"html":"

\n","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.panWrapper {\n width: 200px;\n height: fit-content;\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n flex-direction: column;\n gap: 20px;\n}\n\n.pan {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: fit-content;\n animation: cooking 1.7s infinite;\n}\n@keyframes cooking {\n 0% {\n transform: rotate(0deg);\n transform-origin: top right;\n }\n 10% {\n transform: rotate(-4deg);\n transform-origin: top right;\n }\n 50% {\n transform: rotate(20deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.food {\n position: absolute;\n width: 40%;\n height: 6px;\n background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106));\n left: 10px;\n border-radius: 50%;\n animation: flip 1.7s infinite;\n z-index: 2;\n}\n@keyframes flip {\n 0% {\n transform: translateY(0px) rotate(0deg);\n }\n 50% {\n transform: translateY(-100px) rotate(180deg);\n }\n 100% {\n transform: translateY(0px) rotate(360deg);\n }\n}\n.panBase {\n z-index: 3;\n width: 50%;\n height: 22px;\n border-bottom-left-radius: 40px;\n border-bottom-right-radius: 40px;\n background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191));\n}\n.panHandle {\n width: 40%;\n background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74));\n height: 10px;\n border-radius: 10px;\n}\n.panShadow {\n width: 70px;\n height: 8px;\n background-color: rgba(0, 0, 0, 0.21);\n margin-left: 15px;\n border-radius: 10px;\n animation: shadow 1.7s infinite;\n filter: blur(5px);\n}\n@keyframes shadow {\n 0% {\n transform: scaleX(0.7);\n }\n 50% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0.7);\n }\n}\n"}

polite-rat-20

👁 实时预览

📝 源代码