Input by marcos700x
#212121
1.containerInput { 2 background-color: #000; 3 position: relative; 4 overflow: hidden; 5 margin: 0; 6 padding: 0 0 4px 0; 7 z-index: 1; 8 font-size: 15px; 9} 10 11.containerInput::before { 12 content: ''; 13 width: 110%; 14 aspect-ratio: 1; 15 position: absolute; 16 inset: 0 0 0 0; 17 margin: auto; 18 animation: rotate6234 2.5s ease-in-out infinite; 19 z-index: -1; 20 background-image: conic-gradient(from 0deg at 50% 50%, #073AFF00 0%, #FF0000FF 25%, #073AFF00 25%); 21} 22 23.containerInput > input { 24 width: 210px; 25 height: 50px; 26 font-size: inherit; 27 color: #fff; 28 border: none; 29 padding: 12px; 30 background-color: #0a0a0a; 31 outline: 5px solid #0a0a0a; 32} 33 34.containerInput > input:focus { 35 outline: none; 36} 37 38.containerInput > input:not(:placeholder-shown) { 39 outline: none; 40} 41 42.containerInput > input:not(:placeholder-shown):valid { 43 outline: 4px solid rgb(0, 255, 183); 44 border-radius: 0; 45} 46 47@keyframes rotate6234 { 48 from { 49 transform: rotate(0deg); 50 } 51 52 to { 53 transform: rotate(360deg); 54 } 55}
2.4K views
2.4K views
MIT License