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}