{"html":"

\n\n

\n Stripe\n

\n HolderALEX SMITH\n

\n **** 4242\n 5524 9910 4242\n

\n\n

\n Wise\n

\n BusinessSTUDIO LLC\n

\n **** 8810\n 9012 4432 8810\n

\n\n

\n PayPal\n

\n Emailhello@work.com\n

\n **** 0094\n 3312 0045 0094\n

\n\n

\n \n

******

$12,450.00

\n Total Balance\n

\n \n \n \n \n \n \n \n \n \n

\n","css":"/* Note: this design contains two hover states 1. card hover this just shift card above 2.card hover to see full card. OK! */\n\n/* Wallet Wrapper */\n.wallet {\n position: relative;\n width: 280px;\n height: 230px;\n cursor: pointer;\n perspective: 1000px;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n transition: transform 0.4s ease;\n}\n.wallet::after {\n content: \"Hover to see Balance\";\n position: absolute;\n bottom: -30px;\n font-style: italic;\n color: #003087;\n font-size: 14px;\n font-weight: 600;\n text-decoration: underline;\n}\n/* entry animation for card as page loads */\n@keyframes slideIntoPocket {\n 0% {\n transform: translateY(-100px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* this is wallet back */\n.wallet-back {\n position: absolute;\n bottom: 0;\n width: 280px;\n height: 200px;\n background: #1e341e;\n border-radius: 22px 22px 60px 60px;\n z-index: 5;\n box-shadow:\n inset 0 25px 35px rgba(0, 0, 0, 0.4),\n inset 0 5px 15px rgba(0, 0, 0, 0.5);\n}\n\n/* Cards things */\n.card {\n position: absolute;\n width: 260px;\n height: 140px;\n left: 10px;\n border-radius: 16px;\n padding: 18px;\n color: white;\n box-shadow:\n inset 0 1px 1px rgba(255, 255, 255, 0.3),\n 0 -4px 15px rgba(0, 0, 0, 0.1);\n transition:\n transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),\n z-index 0s;\n animation: slideIntoPocket 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;\n}\n\n.card-inner {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n}\n\n.card-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.chip {\n width: 32px;\n height: 24px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.card-bottom {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n}\n\n.label {\n font-size: 8px;\n opacity: 0.7;\n text-transform: uppercase;\n margin-bottom: 2px;\n display: block;\n}\n\n.value {\n font-size: 10px;\n font-weight: 500;\n}\n\n.card-number-wrapper {\n text-align: right;\n}\n\n.hidden-stars {\n font-size: 16px;\n letter-spacing: 2px;\n}\n\n.card-number {\n display: none;\n font-size: 14px;\n letter-spacing: 1px;\n font-family: monospace;\n}\n\n/* card variants */\n.stripe {\n background: #635bff;\n bottom: 90px;\n z-index: 10;\n animation-delay: 0.1s;\n}\n\n.wise {\n background: #9bd86a;\n bottom: 65px;\n z-index: 20;\n animation-delay: 0.2s;\n}\n\n.paypal {\n background: #ffffff;\n color: #003087;\n bottom: 40px;\n z-index: 30;\n animation-delay: 0.3s;\n}\n\n.paypal .chip {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.paypal .label {\n color: #8c979d;\n}\n\n/* Pocket */\n.pocket {\n position: absolute;\n bottom: 0;\n width: 280px;\n height: 160px;\n z-index: 40;\n filter: drop-shadow(0 15px 25px rgba(20, 40, 20, 0.4));\n}\n\n.pocket-content {\n position: absolute;\n top: 45px;\n width: 100%;\n text-align: center;\n z-index: 50;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.balance-stars {\n color: #839e7b;\n font-size: 24px;\n letter-spacing: 4px;\n transition: 0.3s;\n}\n\n.balance-real {\n color: #a7c59e;\n font-size: 22px;\n font-weight: 600;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 10px);\n transition: 0.3s;\n}\n\n/* eye Logic */\n.eye-icon-wrapper {\n margin-top: 8px;\n height: 20px;\n width: 20px;\n position: relative;\n opacity: 0.3;\n transition: 0.3s;\n}\n\n.eye-icon {\n position: absolute;\n top: 0;\n left: 0;\n stroke: #3be60b;\n transition: 0.3s;\n}\n\n/* hovers works here */\n.wallet:hover {\n transform: translateY(-5px);\n}\n\n.wallet:hover .eye-icon-wrapper {\n opacity: 1;\n}\n\n/* hover effects on cards */\n.wallet:hover .stripe {\n transform: translateY(-75px) rotate(-3deg);\n}\n\n.wallet:hover .wise {\n transform: translateY(-45px) rotate(2deg);\n}\n\n.wallet:hover .paypal {\n transform: translateY(-10px);\n}\n\n/* indi card hover */\n.card:hover {\n z-index: 100 !important;\n transition-delay: 0s !important;\n}\n\n.wallet:hover .stripe:hover {\n transform: translateY(-60px) scale(1.05) rotate(0);\n}\n\n.wallet:hover .wise:hover {\n transform: translateY(-70px) scale(1.05) rotate(0);\n}\n\n.wallet:hover .paypal:hover {\n transform: translateY(-60px) scale(1.05) rotate(0);\n}\n\n.card:hover .hidden-stars {\n display: none;\n}\n\n.card:hover .card-number {\n display: block;\n}\n\n.wallet:hover .balance-stars {\n opacity: 0;\n}\n\n.wallet:hover .balance-real {\n opacity: 1;\n transform: translate(-50%, 0);\n}\n\n.wallet:hover .eye-slash {\n opacity: 0;\n transform: scale(0.5);\n}\n\n.wallet:hover .eye-open {\n opacity: 1;\n transform: scale(1.1);\n}\n"}

rude-bat-50

👁 实时预览

📝 源代码