#212121
1.card-id567 { 2 width: 190px; 3 height: 190px; 4 background: rgb(255, 255, 255); 5 border-radius: 1rem; 6 padding: 1rem; 7 position: relative; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 transition: 300ms ease; 12 animation: 8s thumb-thumb infinite; 13} 14 15.card-id567 svg path { 16 transition: 300ms ease; 17 stroke: rgb(20, 20, 20); 18 opacity: 0; 19} 20 21.bold-567 { 22 font-weight: bold; 23} 24 25.blurry-splash { 26 position: absolute; 27 inset: 0; 28 width: 60px; 29 margin: 0 auto; 30 height: 60px; 31 border-radius: 1rem; 32 z-index: -1; 33 opacity: 70%; 34 filter: blur(15px); 35 background: linear-gradient( 36 120deg, rgb(119, 0, 255) 37 , rgb(22, 94, 250), rgb(44, 226, 250)); 38} 39 40.prompt-id567 { 41 position: absolute; 42 color: rgb(29, 29, 29); 43 text-align: center; 44} 45 46.really-small-text { 47 text-align: center; 48 width: 100%; 49 position: absolute; 50 font-size: 8px; 51 margin-top: 28px; 52 opacity: 0.5; 53} 54 55.card-id567:hover { 56 cursor: none; 57} 58 59.card-id567:hover .prompt-id567 { 60 transition: 300ms ease; 61 opacity: 0; 62} 63 64.token-container { 65 animation: 2s spinny-token-yayyy infinite; 66 margin-bottom: 10px; 67} 68 69.prompt-id567 svg path { 70 stroke: none; 71 opacity: 1; 72} 73 74.card-id567:hover svg path { 75 opacity: 1; 76} 77 78@keyframes spinny-token-yayyy { 79 0% { 80 transform: perspective(200px) rotateY(0deg); 81 } 82 83 100% { 84 transform: perspective(200px) rotateY(360deg); 85 } 86} 87 88@keyframes thumb-thumb { 89 0%, 10%, 100% { 90 transform: scale(100%); 91 } 92 93 5% { 94 transform: scale(103%); 95 } 96 97 7% { 98 transform: scale(97%); 99 } 100}
Comments
MIT License