{"html":"

\n Loading...\n

\n","css":".wallet-loader {\n --wallet-color: #8b4513;\n /* SaddleBrown */\n --wallet-dark: #5a2d0c;\n --bill-color: #66cdaa;\n /* MediumAquamarine */\n --bill-detail: #2e8b57;\n /* SeaGreen */\n --txt-color: #ffffff;\n /* White text */\n --duration: 4s;\n\n position: relative;\n width: 110px;\n height: 80px;\n}\n\n/* --- WALLET BACK --- */\n.wallet-loader .wallet-back {\n position: absolute;\n bottom: 10px;\n left: 5px;\n width: 100px;\n height: 45px;\n background: var(--wallet-dark);\n border-radius: 5px 5px 0 0;\n z-index: 0;\n}\n\n/* --- BILLS (Common Styles) --- */\n.wallet-loader .bill {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: -30px;\n width: 70px;\n height: 40px;\n background: var(--bill-color);\n border-radius: 2px;\n border: 1px solid var(--bill-detail);\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Rupee Symbol */\n.wallet-loader .bill::before {\n content: \"₹\";\n font-family: sans-serif;\n font-weight: bold;\n font-size: 18px;\n color: var(--bill-detail);\n border: 2px solid var(--bill-detail);\n border-radius: 50%;\n width: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Bill Decorative Lines */\n.wallet-loader .bill::after {\n content: \"\";\n position: absolute;\n left: 3px;\n right: 3px;\n top: 3px;\n bottom: 3px;\n border: 1px dashed var(--bill-detail);\n border-radius: 1px;\n}\n\n/* Bill Specific Animations */\n.wallet-loader .bill-1 {\n z-index: 1;\n animation: slide-in var(--duration) ease-in-out infinite;\n animation-delay: 0s;\n}\n\n.wallet-loader .bill-2 {\n z-index: 2;\n animation: slide-in var(--duration) ease-in-out infinite;\n animation-delay: 0.8s;\n}\n\n.wallet-loader .bill-3 {\n z-index: 3;\n animation: slide-in var(--duration) ease-in-out infinite;\n animation-delay: 1.6s;\n}\n\n/* --- WALLET FRONT --- */\n.wallet-loader .wallet-front {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 110px;\n height: 52px;\n background: linear-gradient(180deg, var(--wallet-color), var(--wallet-dark));\n border-radius: 6px 6px 10px 10px;\n z-index: 10;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\n\n /* Center the text inside */\n display: flex;\n align-items: center;\n justify-content: center;\n\n animation: wallet-bounce var(--duration) ease-in-out infinite;\n}\n\n/* Stitching Detail */\n.wallet-loader .wallet-front::before {\n content: \"\";\n position: absolute;\n left: 6px;\n right: 6px;\n bottom: 6px;\n top: 6px;\n border: 1px dashed rgba(60, 30, 0, 0.3);\n border-radius: 4px 4px 8px 8px;\n pointer-events: none;\n}\n\n/* --- TEXT STYLING --- */\n.wallet-loader .text {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica,\n Arial, sans-serif;\n font-size: 14px;\n font-weight: 600;\n color: var(--txt-color);\n letter-spacing: 0.5px;\n text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);\n}\n\n/* The moving dots */\n.wallet-loader .dot {\n display: inline-block;\n animation: wave 1.5s infinite;\n}\n\n.wallet-loader .dot:nth-child(1) {\n animation-delay: 0s;\n}\n\n.wallet-loader .dot:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.wallet-loader .dot:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n/* --- ANIMATIONS --- */\n\n/* Money Falling In */\n@keyframes slide-in {\n 0% {\n top: -30px;\n opacity: 0;\n transform: translateX(-50%) scale(0.8);\n }\n\n 10% {\n opacity: 1;\n }\n\n 25% {\n top: 18px;\n transform: translateX(-50%) scale(1);\n }\n\n 90% {\n top: 18px;\n opacity: 1;\n }\n\n 100% {\n top: 18px;\n opacity: 0;\n }\n}\n\n/* Wallet Reaction (Squish/Bounce) */\n@keyframes wallet-bounce {\n 0%,\n 100% {\n transform: scale(1);\n }\n\n 12% {\n transform: scale(1.02, 0.98);\n }\n\n 15% {\n transform: scale(1);\n }\n\n 32% {\n transform: scale(1.02, 0.98);\n }\n\n 35% {\n transform: scale(1);\n }\n\n 52% {\n transform: scale(1.02, 0.98);\n }\n\n 55% {\n transform: scale(1);\n }\n}\n\n/* Dot Wave Animation */\n@keyframes wave {\n 0%,\n 60%,\n 100% {\n transform: translateY(0);\n }\n\n 30% {\n transform: translateY(-4px);\n }\n}\n"}

tame-vampirebat-54

👁 实时预览

📝 源代码