{"html":"

\n","css":".loader {\n width: 100px;\n height: 100px;\n position: relative;\n animation: shake 3s infinite ease-in-out;\n}\n\n.cup {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 30px;\n background-color: #5b4022cb;\n border: 1px solid #2e2e2e;\n border-radius: 3px 3px 10px 10px;\n z-index: 1;\n animation: cupPulse 6s infinite ease-in-out;\n}\n\n.cup::before {\n content: \"\";\n position: absolute;\n bottom: -5px;\n width: calc(100% - 2px);\n height: 6px;\n background: #5b4022cb;\n border: 1px solid #2e2e2e;\n border-top: none;\n border-radius: 50%;\n z-index: -1;\n animation: cupPulse 6s infinite ease-in-out;\n}\n\n.cup::after {\n content: \"\";\n position: absolute;\n top: -2px;\n left: 1px;\n width: calc(100% - 2px);\n height: 4px;\n background: #da8920ca;\n border: 1px solid #2e2e2e;\n border-radius: 50%;\n animation: coffeeGlow 6s infinite ease-in-out;\n}\n\n.cup-handle {\n position: absolute;\n top: 5px;\n right: -10px;\n width: 10px;\n height: 15px;\n border: 2px solid #2e2e2e;\n border-left: none;\n border-radius: 0 10px 10px 0;\n background: transparent;\n}\n\n.smoke {\n position: absolute;\n bottom: 100%;\n left: 50%;\n width: 10px;\n height: 25px;\n background: rgba(72, 67, 67, 0.501);\n border-radius: 50%;\n transform: translateX(-50%);\n animation: rise 3s infinite ease-in-out;\n filter: blur(8px);\n}\n\n.smoke.one {\n animation-delay: 0s;\n}\n.smoke.two {\n animation-delay: 0.8s;\n}\n.smoke.three {\n animation-delay: 1.6s;\n}\n\n.load {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n font-size: 12px;\n color: #2e2e2e;\n opacity: 0.6;\n}\n\n@keyframes rise {\n 0% {\n transform: translate(-50%, 0) scale(0.4);\n opacity: 0;\n }\n 30% {\n opacity: 0.7;\n }\n 60% {\n opacity: 0.4;\n }\n 100% {\n transform: translate(-50%, -120px) scale(1);\n opacity: 0;\n }\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n 25% {\n transform: translateX(-4px) translateY(-2px) rotate(-2deg);\n }\n 50% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n 75% {\n transform: translateX(4px) translateY(-2px) rotate(2deg);\n }\n 100% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n}\n\n/* New Animations */\n@keyframes cupPulse {\n 0%,\n 100% {\n background-color: #5b4022cb;\n }\n 50% {\n background-color: #f5f5f5bd;\n }\n}\n\n@keyframes coffeeGlow {\n 0%,\n 100% {\n background: #da8920ca;\n }\n 50% {\n background: #fed197d5;\n }\n}\n"}

afraid-cougar-26

👁 实时预览

📝 源代码