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

原创已于 2024-04-15 18:03:15 修改 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-04-13 00:53:06 首次发布

本文介绍了如何使用HTML和CSS创建一个具有动画效果的搜索框输入框，通过`borderColorAnimation`关键帧动画实现颜色渐变，提升用户体验。

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

走马灯的搜索框

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;
}