{"html":"

..........................

\n","css":".loader {\n width: 100px;\n height: 80px;\n position: relative;\n display: flex;\n justify-items: center;\n align-items: center;\n}\n.loader .cup {\n position: absolute;\n width: 25px;\n height: 18px;\n background-color: #fff;\n border: 1px solid #2e2e2e;\n z-index: 1;\n border-radius: 2px 2px 10px 10px;\n animation: expansion 6s infinite ease-in-out;\n transform-origin: center;\n}\n\n.cup::after {\n content: \"\";\n position: absolute;\n top: -2px;\n width: calc(100% - 2px);\n height: 2px;\n background: #fed59fca;\n border: 1px solid #2e2e2ebe;\n border-radius: 50%;\n}\n.cup::before {\n content: \"\";\n position: absolute;\n top: 15px;\n width: calc(100% - 2px);\n height: 4px;\n background: #ffffff00;\n border: 1px solid #2e2e2e;\n border-top: none;\n border-radius: 50%;\n z-index: -1;\n}\n\n.loader .cup .cup-handle {\n position: absolute;\n width: 5px;\n height: 10px;\n background-color: #fff;\n border: 1px solid #2e2e2e;\n right: -5px;\n top: 2px;\n border-radius: 2px 10px 20px 2px;\n}\n\n.loader .cup .smoke {\n position: absolute;\n bottom: 100%;\n left: 50%;\n width: 15px;\n height: 25px;\n background: rgba(107, 102, 102, 0.433);\n border-radius: 50%;\n transform: translateX(-50%);\n animation: rise 6s infinite ease-in-out;\n filter: blur(8px);\n}\n\n.loader .cup .smoke.one {\n animation-delay: 0s;\n}\n.loader .cup .smoke.two {\n animation-delay: 1s;\n}\n.loader .cup .smoke.three {\n animation-delay: 2s;\n}\n\n.loader .load {\n position: absolute;\n font-size: 10px;\n opacity: 0.7;\n top: 45%;\n left: 50%;\n transform: translateX(-50%);\n z-index: -1;\n}\n\n@keyframes expansion {\n 0% {\n width: 25px;\n transform: translateX(0);\n }\n 40% {\n width: 100%;\n transform: translateX(0);\n }\n 80% {\n width: 25px;\n transform: translateX(64px);\n }\n 90% {\n width: 100%;\n transform: translateX(0);\n }\n 100% {\n width: 25px;\n transform: translateX(0);\n }\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"}

bad-dragonfly-54

👁 实时预览

📝 源代码