Input by Akshdeep74644
#e8e8e8
1.input-group { 2 position: relative; 3} 4 5.input { 6 border: 3px solid #000; 7 background: none; 8 padding: 1rem; 9 font-size: 1rem; 10 color: black; 11} 12 13.user-label { 14 position: absolute; 15 left: 15px; 16 color: #000; 17 pointer-events: none; 18 transform: translateY(1rem); 19 transition: 350ms; 20} 21 22.input:focus, 23input:valid { 24 outline: none; 25 --angle: 0deg; 26 border-bottom: 3px solid; 27 border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1; 28 animation: 3s rotate9234 linear infinite; 29} 30 31@keyframes rotate9234 { 32 to { 33 --angle: 360deg; 34 } 35} 36 37@property --angle { 38 syntax: '<angle>'; 39 initial-value: 0deg; 40 inherits: false; 41} 42 43.input:focus~label, 44input:valid~label { 45 transform: translateY(235%) scale(1); 46 background-color: #e8e8e8; 47 padding: 0 .2em; 48 color: #2196f3; 49}
2.9K views
2.9K views
MIT License