{"html":"

MasterCard

\n \n

debit

\n 0123\n 4567\n 8901\n 2345\n

Valid
thru

01/38

Jk Huger

\n Mastercard\n

","css":".card,\n.card__chip {\n overflow: hidden;\n position: relative;\n}\n\n.card,\n.card__chip-texture,\n.card__texture {\n animation-duration: 3s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n.card {\n animation-name: rotate_500;\n background-color: var(--primary);\n background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%),\n radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%),\n radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%);\n border-radius: 0.5em;\n box-shadow: 0 0 0 hsl(0,0%,80%),\n 0 0 0 hsl(0,0%,100%),\n -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);\n color: hsl(0,0%,100%);\n width: 10.3em;\n height: 6.8em;\n transform: translate3d(0,0,0);\n}\n\n.card__info,\n.card__chip-texture,\n.card__texture {\n position: absolute;\n}\n\n.card__chip-texture,\n.card__texture {\n animation-name: texture;\n top: 0;\n left: 0;\n width: 200%;\n height: 100%;\n}\n\n.card__info {\n font: 0.75em/1 \"DM Sans\", sans-serif;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n padding: 0.75rem;\n inset: 0;\n}\n\n.card__logo,\n.card__number {\n width: 100%;\n}\n\n.card__logo {\n font-weight: bold;\n font-style: italic;\n}\n\n.card__chip {\n background-image: linear-gradient(hsl(0,0%,70%),hsl(0,0%,80%));\n border-radius: 0.2rem;\n box-shadow: 0 0 0 0.05rem hsla(0,0%,0%,0.5) inset;\n width: 1.25rem;\n height: 1.25rem;\n transform: translate3d(0,0,0);\n}\n\n.card__chip-lines {\n width: 100%;\n height: auto;\n}\n\n.card__chip-texture {\n background-image: linear-gradient(-80deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.6) 48% 52%,hsla(0,0%,100%,0));\n}\n\n.card__type {\n align-self: flex-end;\n margin-left: auto;\n}\n\n.card__digit-group,\n.card__exp-date,\n.card__name {\n background: linear-gradient(hsl(0,0%,100%),hsl(0,0%,85%) 15% 55%,hsl(0,0%,70%) 70%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n font-family: \"Courier Prime\", monospace;\n filter: drop-shadow(0 0.05rem hsla(0,0%,0%,0.3));\n}\n\n.card__number {\n font-size: 0.8rem;\n display: flex;\n justify-content: space-between;\n}\n\n.card__valid-thru,\n.card__name {\n text-transform: uppercase;\n}\n\n.card__valid-thru,\n.card__exp-date {\n margin-bottom: 0.25rem;\n width: 50%;\n}\n\n.card__valid-thru {\n font-size: 0.3rem;\n padding-right: 0.25rem;\n text-align: right;\n}\n\n.card__exp-date,\n.card__name {\n font-size: 0.6rem;\n}\n\n.card__exp-date {\n padding-left: 0.25rem;\n}\n\n.card__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 6.25rem;\n}\n\n.card__vendor,\n.card__vendor:before,\n.card__vendor:after {\n position: absolute;\n}\n\n.card__vendor {\n right: 0.375rem;\n bottom: 0.375rem;\n width: 2.55rem;\n height: 1.5rem;\n}\n\n.card__vendor:before,\n.card__vendor:after {\n border-radius: 50%;\n content: \"\";\n display: block;\n top: 0;\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.card__vendor:before {\n background-color: #e71d1a;\n left: 0;\n}\n\n.card__vendor:after {\n background-color: #fa5e03;\n box-shadow: -1.05rem 0 0 #f59d1a inset;\n right: 0;\n}\n\n.card__vendor-sr {\n clip: rect(1px,1px,1px,1px);\n overflow: hidden;\n position: absolute;\n width: 1px;\n height: 1px;\n}\n\n.card__texture {\n animation-name: texture;\n background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%);\n}\n \n/* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue),10%,30%);\n --fg: hsl(var(--hue),10%,90%);\n }\n}\n\n/* Animation */\n@keyframes rotate_500 {\n from,\n to {\n animation-timing-function: ease-in;\n box-shadow: 0 0 0 hsl(0,0%,80%),\n 0.1rem 0 0 hsl(0,0%,100%),\n -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);\n transform: rotateY(-10deg);\n }\n\n 25%,\n 75% {\n animation-timing-function: ease-out;\n box-shadow: 0 0 0 hsl(0,0%,80%),\n 0 0 0 hsl(0,0%,100%),\n -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3);\n transform: rotateY(0deg);\n }\n\n 50% {\n animation-timing-function: ease-in;\n box-shadow: -0.1rem 0 0 hsl(0,0%,80%),\n 0 0 0 hsl(0,0%,100%),\n -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3);\n transform: rotateY(10deg);\n }\n}\n\n@keyframes texture {\n from,\n to {\n transform: translate3d(0,0,0);\n }\n\n 50% {\n transform: translate3d(-50%,0,0);\n }\n} "}

spotty-swan-68

👁 实时预览

📝 源代码