<input type="email" placeholder="airenliao@gmail.com">

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  gap: 20px;
  place-content: center;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.5;
}

@keyframes gradient {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: 100% 100%;
  }
}
input[type="email"] {
  color: #bfd2ff;
  display: inline-flex;
  border-radius: 2px;
  padding: 1.4rem 2rem 1.6rem;
  border: none 0;
  background-color: rgba(57, 63, 84, 0.8);
  background-image: linear-gradient(
    to right,
    #b294ff,
    #57e6e6,
    #feffb8,
    #57e6e6,
    #b294ff,
    #57e6e6
  );
  background-size: 500% 3px;
  background-repeat: no-repeat;
  background-position: left bottom;
  animation: gradient 3s linear infinite;
}

input[type="email"]:focus {
  outline: none;
  background-image: linear-gradient(
      to right,
      #b294ff,
      #57e6e6,
      #feffb8,
      #57e6e6,
      #b294ff,
      #57e6e6
    ),
    linear-gradient(
      to right,
      #b294ff,
      #57e6e6,
      #feffb8,
      #57e6e6,
      #b294ff,
      #57e6e6
    ),
    linear-gradient(
      to right,
      #b294ff,
      #57e6e6,
      #feffb8,
      #57e6e6,
      #b294ff,
      #57e6e6
    ),
    linear-gradient(
      to right,
      #b294ff,
      #57e6e6,
      #feffb8,
      #57e6e6,
      #b294ff,
      #57e6e6
    );
  background-size: 3px 500%, 500% 3px, 3px 500%, 500% 3px;
  background-position: left top, left top, right top, right bottom;
  animation: none;
}

:is(::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder) {
  color: red;
}