1.2K views
1.card, 2.card__chip { 3 overflow: hidden; 4 position: relative; 5} 6 7.card, 8.card__chip-texture, 9.card__texture { 10 animation-duration: 3s; 11 animation-timing-function: ease-in-out; 12 animation-iteration-count: infinite; 13} 14 15.card { 16 animation-name: rotate_500; 17 background-color: var(--primary); 18 background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%), 19 radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%), 20 radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%); 21 border-radius: 0.5em; 22 box-shadow: 0 0 0 hsl(0,0%,80%), 23 0 0 0 hsl(0,0%,100%), 24 -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3); 25 color: hsl(0,0%,100%); 26 width: 10.3em; 27 height: 6.8em; 28 transform: translate3d(0,0,0); 29} 30 31.card__info, 32.card__chip-texture, 33.card__texture { 34 position: absolute; 35} 36 37.card__chip-texture, 38.card__texture { 39 animation-name: texture; 40 top: 0; 41 left: 0; 42 width: 200%; 43 height: 100%; 44} 45 46.card__info { 47 font: 0.75em/1 "DM Sans", sans-serif; 48 display: flex; 49 align-items: center; 50 flex-wrap: wrap; 51 padding: 0.75rem; 52 inset: 0; 53} 54 55.card__logo, 56.card__number { 57 width: 100%; 58} 59 60.card__logo { 61 font-weight: bold; 62 font-style: italic; 63} 64 65.card__chip { 66 background-image: linear-gradient(hsl(0,0%,70%),hsl(0,0%,80%)); 67 border-radius: 0.2rem; 68 box-shadow: 0 0 0 0.05rem hsla(0,0%,0%,0.5) inset; 69 width: 1.25rem; 70 height: 1.25rem; 71 transform: translate3d(0,0,0); 72} 73 74.card__chip-lines { 75 width: 100%; 76 height: auto; 77} 78 79.card__chip-texture { 80 background-image: linear-gradient(-80deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.6) 48% 52%,hsla(0,0%,100%,0)); 81} 82 83.card__type { 84 align-self: flex-end; 85 margin-left: auto; 86} 87 88.card__digit-group, 89.card__exp-date, 90.card__name { 91 background: linear-gradient(hsl(0,0%,100%),hsl(0,0%,85%) 15% 55%,hsl(0,0%,70%) 70%); 92 -webkit-background-clip: text; 93 -webkit-text-fill-color: transparent; 94 font-family: "Courier Prime", monospace; 95 filter: drop-shadow(0 0.05rem hsla(0,0%,0%,0.3)); 96} 97 98.card__number { 99 font-size: 0.8rem; 100 display: flex; 101 justify-content: space-between; 102} 103 104.card__valid-thru, 105.card__name { 106 text-transform: uppercase; 107} 108 109.card__valid-thru, 110.card__exp-date { 111 margin-bottom: 0.25rem; 112 width: 50%; 113} 114 115.card__valid-thru { 116 font-size: 0.3rem; 117 padding-right: 0.25rem; 118 text-align: right; 119} 120 121.card__exp-date, 122.card__name { 123 font-size: 0.6rem; 124} 125 126.card__exp-date { 127 padding-left: 0.25rem; 128} 129 130.card__name { 131 overflow: hidden; 132 white-space: nowrap; 133 text-overflow: ellipsis; 134 width: 6.25rem; 135} 136 137.card__vendor, 138.card__vendor:before, 139.card__vendor:after { 140 position: absolute; 141} 142 143.card__vendor { 144 right: 0.375rem; 145 bottom: 0.375rem; 146 width: 2.55rem; 147 height: 1.5rem; 148} 149 150.card__vendor:before, 151.card__vendor:after { 152 border-radius: 50%; 153 content: ""; 154 display: block; 155 top: 0; 156 width: 1.5rem; 157 height: 1.5rem; 158} 159 160.card__vendor:before { 161 background-color: #e71d1a; 162 left: 0; 163} 164 165.card__vendor:after { 166 background-color: #fa5e03; 167 box-shadow: -1.05rem 0 0 #f59d1a inset; 168 right: 0; 169} 170 171.card__vendor-sr { 172 clip: rect(1px,1px,1px,1px); 173 overflow: hidden; 174 position: absolute; 175 width: 1px; 176 height: 1px; 177} 178 179.card__texture { 180 animation-name: texture; 181 background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%); 182} 183 184/* Dark theme */ 185@media (prefers-color-scheme: dark) { 186 :root { 187 --bg: hsl(var(--hue),10%,30%); 188 --fg: hsl(var(--hue),10%,90%); 189 } 190} 191 192/* Animation */ 193@keyframes rotate_500 { 194 from, 195 to { 196 animation-timing-function: ease-in; 197 box-shadow: 0 0 0 hsl(0,0%,80%), 198 0.1rem 0 0 hsl(0,0%,100%), 199 -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3); 200 transform: rotateY(-10deg); 201 } 202 203 25%, 204 75% { 205 animation-timing-function: ease-out; 206 box-shadow: 0 0 0 hsl(0,0%,80%), 207 0 0 0 hsl(0,0%,100%), 208 -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3); 209 transform: rotateY(0deg); 210 } 211 212 50% { 213 animation-timing-function: ease-in; 214 box-shadow: -0.1rem 0 0 hsl(0,0%,80%), 215 0 0 0 hsl(0,0%,100%), 216 -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3); 217 transform: rotateY(10deg); 218 } 219} 220 221@keyframes texture { 222 from, 223 to { 224 transform: translate3d(0,0,0); 225 } 226 227 50% { 228 transform: translate3d(-50%,0,0); 229 } 230}
JkHuger
JkHuger
MIT License