2.1K views
1.wallet { 2 --bg-color: #ceb2fc; 3 --bg-color-light: #f0e7ff; 4 --text-color-hover: #fff; 5 --box-shadow-color: rgba(206, 178, 252, 0.48); 6} 7 8.card { 9 width: 220px; 10 height: 321px; 11 background: #fff; 12 border-top-right-radius: 10px; 13 overflow: hidden; 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18 position: relative; 19 box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04); 20 transition: all 0.3s ease-out; 21 text-decoration: none; 22} 23 24.card:hover { 25 transform: translateY(-5px) scale(1.005) translateZ(0); 26 box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 27 0 24px 46px var(--box-shadow-color); 28} 29 30.card:hover .overlay { 31 transform: scale(4) translateZ(0); 32} 33 34.card:hover .circle { 35 border-color: var(--bg-color-light); 36 background: var(--bg-color); 37} 38 39.card:hover .circle:after { 40 background: var(--bg-color-light); 41} 42 43.card:hover p { 44 color: var(--text-color-hover); 45} 46 47.card p { 48 font-size: 17px; 49 color: #4c5656; 50 margin-top: 30px; 51 z-index: 1000; 52 transition: color 0.3s ease-out; 53} 54 55.circle { 56 width: 131px; 57 height: 131px; 58 border-radius: 50%; 59 background: #fff; 60 border: 2px solid var(--bg-color); 61 display: flex; 62 justify-content: center; 63 align-items: center; 64 position: relative; 65 z-index: 1; 66 transition: all 0.3s ease-out; 67} 68 69.circle:after { 70 content: ""; 71 width: 118px; 72 height: 118px; 73 display: block; 74 position: absolute; 75 background: var(--bg-color); 76 border-radius: 50%; 77 top: 7px; 78 left: 7px; 79 transition: opacity 0.3s ease-out; 80} 81 82.circle svg { 83 z-index: 10000; 84 transform: translateZ(0); 85} 86 87.overlay { 88 width: 118px; 89 position: absolute; 90 height: 118px; 91 border-radius: 50%; 92 background: var(--bg-color); 93 top: 70px; 94 left: 50px; 95 z-index: 0; 96 transition: transform 0.3s ease-out; 97}
MIT License