Card by SRIMANKS
#212121
1.card { 2 width: 190px; 3 height: 254px; 4 background: black; 5 display: flex; 6 flex-direction: column; 7 align-items: center; 8 justify-content: center; 9 position: relative; 10 transition: 0.2s; 11} 12 13.card:hover { 14 transform: scale(1.05); 15 transition: 0.2s; 16 filter: drop-shadow(0px 0px 10px rgb(0, 247, 255)); 17} 18 19.card::after { 20 content: "scanning"; 21 height: fit-content; 22 width: 100%; 23 color: lightskyblue; 24 position: absolute; 25 z-index: 2; 26 bottom: 15%; 27 text-align: center; 28 animation: 2s dots infinite; 29} 30 31.card::before { 32 content: ""; 33 height: 0.1em; 34 width: 80%; 35 border-radius: 10px; 36 background-color: rgb(00, 200, 255); 37 position: absolute; 38 z-index: 2; 39 bottom: 10%; 40 animation: 4s grow infinite; 41 align-self: flex-start; 42 margin-left: 10%; 43 filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 10px #3fefef); 44} 45 46.card svg { 47 filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 50px #3fefef); 48} 49 50path { 51 stroke-dasharray: 90; 52 animation: loop 4s infinite; 53} 54 55@keyframes loop { 56 0% { 57 stroke-dashoffset: 50; 58 stroke-dasharray: 90; 59 } 60 61 50% { 62 stroke-dashoffset: 100; 63 ; 64 stroke-dasharray: 50; 65 } 66 67 100% { 68 stroke-dashoffset: 50; 69 stroke-dasharray: 90; 70 } 71} 72 73@keyframes dots { 74 0% { 75 content: "scanning." 76 } 77 78 25% { 79 content: "scanning.." 80 } 81 82 50% { 83 content: "scanning..." 84 } 85 86 75% { 87 content: "scanning" 88 } 89 90 100% { 91 content: "scanning." 92 } 93} 94 95@keyframes grow { 96 0% { 97 width: 0%; 98 } 99 100 50% { 101 width: 80% 102 } 103 104 100% { 105 width: 0%; 106 } 107}
2.4K views
2.4K views
MIT License