1.container {
2  position: relative;
3  width: 200px;
4}
5
6.container input {
7  width: 100%;
8  background: transparent;
9  outline: none;
10  border: none;
11  color: #222;
12  padding: 8px;
13}
14
15.container label {
16  position: absolute;
17  left: 0;
18  top: 0;
19  color: rgba(105, 105, 105, 0.7);
20  text-transform: uppercase;
21  pointer-events: none;
22  transition: .5s;
23  font-weight: bold;
24}
25
26.container input:valid ~ label,
27.container input:focus ~ label {
28  color: rgb(10, 131, 212);
29  transform: translateY(-15px);
30  font-size: .6rem;
31}
32
33.container i {
34  position: absolute;
35  left: 0;
36  bottom: 0;
37  width: 100%;
38  height: 2px;
39  background: #222;
40}
41
42.container i:before {
43  content: '';
44  position: absolute;
45  width: 100%;
46  height: 100%;
47  background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);
48  animation: animate 3s linear infinite;
49}