{"html":"

\n \n

\n \n \n

*****4321

VISA

\n \n \n

*****1234

VISA

\n \n

\n \n \n \n \n \n Add Cash\n \n

\n","css":".card {\n width: 300px;\n border: 2px solid #dfdfdf;\n border-radius: 20px;\n padding-bottom: 10px;\n position: relative;\n transition:\n max-height 0.3s ease,\n padding 0.3s ease;\n max-height: 400px;\n overflow: hidden;\n background-color: #fff;\n\n &:has(.header .close .toggle-checkbox:checked) {\n max-height: 84px;\n padding: 0;\n\n .header {\n .close {\n opacity: 0;\n }\n }\n\n .add-cash-button {\n transform: translate(145%, -886%);\n z-index: 20;\n }\n }\n\n &:has(.header .close .toggle-checkbox:not(:checked)) {\n .content {\n .header {\n animation: fadeSlideIn 0.35s ease-out forwards;\n animation-delay: 0.05s;\n }\n\n .bank-cards {\n animation: fadeSlideIn 0.35s ease-out forwards;\n animation-delay: 0.15s;\n }\n\n .footer {\n animation: fadeSlideIn 0.35s ease-out forwards;\n animation-delay: 0.25s;\n }\n }\n }\n\n & > .header {\n border-bottom: 2px solid #dfdfdf;\n transition: border-color 0.3s ease;\n\n .content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 15px;\n\n .wallet {\n display: flex;\n align-items: center;\n gap: 6px;\n\n .icon-wrapper {\n padding: 10px;\n border-radius: 15px;\n background-color: #f0f0f0;\n display: grid;\n place-items: center;\n }\n }\n\n .text {\n .title,\n .balance {\n margin: 2px 0;\n }\n\n .title {\n font-weight: semi-bold;\n color: #8e8e8e;\n }\n\n .balance {\n font-size: 20px;\n font-weight: bold;\n }\n }\n\n .close {\n border: 2px solid #f0f0f0;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: grid;\n place-items: center;\n cursor: pointer;\n transition: opacity 0.3s ease;\n\n .toggle-checkbox {\n pointer-events: none;\n width: 100%;\n height: 100%;\n display: none;\n z-index: 100;\n }\n\n .close-icon {\n width: 20px;\n aspect-ratio: 1;\n color: #8e8e8e;\n }\n\n &:hover {\n background-color: #f0f0f0;\n }\n }\n }\n }\n\n .content {\n padding: 0px 15px 48px;\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n opacity: 0;\n padding: 10px 0px;\n\n .title {\n font-weight: bold;\n font-size: 17px;\n }\n\n .add-card-button {\n background: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 5px;\n border: 2px solid #f0f0f0;\n border-radius: 15px;\n color: #8e8e8e;\n font-weight: semi-bold;\n transition: background-color 0.2s ease-in-out;\n padding: 2px 5px;\n\n .add-card-icon {\n width: 18px;\n aspect-ratio: 1;\n color: #8e8e8e;\n }\n\n &:hover {\n background-color: #f0f0f0;\n }\n }\n }\n\n .bank-cards {\n display: flex;\n flex-direction: column;\n gap: 10px;\n position: relative;\n opacity: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n height: calc((100% - 10px) / 2);\n border-radius: 6px;\n outline: 2.5px solid #333;\n pointer-events: none;\n opacity: 0;\n }\n\n &:has(.input[type=\"radio\"]:checked)::before {\n opacity: 1;\n transition:\n transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n opacity 0.3s ease-in-out;\n }\n\n &:has(.bank-card:nth-child(1) .input[type=\"radio\"]:checked)::before {\n transform: translateY(0);\n }\n\n &:has(.bank-card:nth-child(2) .input[type=\"radio\"]:checked)::before {\n transform: translateY(calc(100% + 10px));\n }\n\n .bank-card {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 6px;\n padding: 5px 6px;\n background-color: #f9f9f9;\n cursor: pointer;\n transition: background-color 0.2s ease-in-out;\n\n .number {\n display: flex;\n align-items: center;\n gap: 10px;\n\n .input[type=\"radio\"] {\n display: none;\n }\n\n .custom-radio {\n display: inline-block;\n width: 16px;\n aspect-ratio: 1;\n border: 2px solid #333;\n border-radius: 4px;\n position: relative;\n cursor: pointer;\n }\n\n .custom-radio::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 8px;\n aspect-ratio: 1;\n background-color: #333;\n border-radius: 2px;\n transition: transform 0.2s ease-in-out;\n }\n\n .input[type=\"radio\"]:checked + .custom-radio::after {\n transform: translate(-50%, -50%) scale(1);\n }\n\n .card-number {\n margin: 0;\n font-weight: bold;\n }\n }\n\n .type {\n margin: 0;\n font-weight: bold;\n font-size: 14px;\n }\n\n &:hover {\n background-color: #efefef;\n }\n }\n }\n\n .footer {\n margin-top: 15px;\n opacity: 0;\n\n .cash {\n .cash-title {\n margin: 0;\n font-weight: bold;\n color: #8e8e8e;\n }\n\n .blocks {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-top: 5px;\n text-align: center;\n color: #3d3d3d;\n font-weight: semi-bold;\n\n .block {\n padding: 5px 10px;\n border-radius: 6px;\n border: 2px solid #f0f0f0;\n cursor: pointer;\n transition:\n background-color 0.2s ease-in-out,\n transform 0.2s ease-in-out;\n\n &:hover {\n background-color: #f0f0f0;\n transform: translateY(-2px);\n }\n }\n }\n }\n }\n }\n .add-cash-button {\n position: absolute;\n display: flex;\n align-items: center;\n cursor: pointer;\n gap: 5px;\n border: none;\n background-color: #000;\n color: #fff;\n padding: 6px 10px;\n border-radius: 20px;\n transform: translate(15%, -100%);\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n\n .add-card-button-icon {\n width: 18px;\n aspect-ratio: 1;\n transition: transform 0.3s ease;\n }\n\n &:hover {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n\n .add-card-button-icon {\n transform: rotate(90deg);\n }\n }\n }\n}\n\n@keyframes fadeSlideIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n"}

weak-treefrog-3

👁 实时预览

📝 源代码