太酷啦！搜索框跑马灯渐变色！

可以极致优化！谁看谁迷糊啊！视频审核中先发个图片了。

走马灯的搜索框

HTML

  <input name="CPN1" type="text" id="CPN1" value="" class="" placeholder="R1PN/R3PN/DPN/Description" >

CSS

@keyframes borderColorAnimation {
  0% {
   border-image-source: linear-gradient(to right, #f00, #f00);
  }
  25% {
   border-image-source: linear-gradient(to right, #f00, #ff0);
  }
  50% {
   border-image-source: linear-gradient(to right, #ff0, #0df);
  }
  75% {
   border-image-source: linear-gradient(to right, #0df, Magenta);
  }
  100% {
   border-image-source: linear-gradient(to right, Magenta, #f00);
  }
}

input:focus {
 border: 2px solid #d700ff;
 border-radius: 0;
  border-image-slice: 1;
  animation: borderColorAnimation 5s ease-in-out infinite;
}