This post is saved as a draft.
#212121
1.input-div { 2 position: relative; 3 width: 100px; 4 height: 100px; 5 border-radius: 50%; 6 border: 2px solid rgb(1, 235, 252); 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 overflow: hidden; 11 box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255); 12 animation: flicker 2s linear infinite; 13} 14 15.icon { 16 color: rgb(1, 235, 252); 17 font-size: 2rem; 18 cursor: pointer; 19 animation: iconflicker 2s linear infinite; 20} 21 22.input { 23 position: absolute; 24 opacity: 0; 25 width: 100%; 26 height: 100%; 27 cursor: pointer !important; 28} 29 30@keyframes flicker { 31 0% { 32 border: 2px solid rgb(1, 235, 252); 33 box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255); 34 } 35 36 5% { 37 border: none; 38 box-shadow: none; 39 } 40 41 10% { 42 border: 2px solid rgb(1, 235, 252); 43 box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255); 44 } 45 46 25% { 47 border: none; 48 box-shadow: none; 49 } 50 51 30% { 52 border: 2px solid rgb(1, 235, 252); 53 box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255); 54 } 55 56 100% { 57 border: 2px solid rgb(1, 235, 252); 58 box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255); 59 } 60} 61 62@keyframes iconflicker { 63 0% { 64 opacity: 1; 65 } 66 67 5% { 68 opacity: 0.2; 69 } 70 71 10% { 72 opacity: 1; 73 } 74 75 25% { 76 opacity: 0.2; 77 } 78 79 30% { 80 opacity: 1; 81 } 82 83 100% { 84 opacity: 1; 85 } 86}
Variation of ainput
Variation of ainput