咨询：如何实现支持圆角的边框输入框动画？现有方案存局限

需要实现一款带边框动画的输入框，动画效果类似某Dribbble作品中的样式。目前尝试用背景图实现，但该方案不支持border-radius，现有代码如下：

现有代码 #

CSS #

@keyframes bg {
    0% {
      background-size: 0% 3px, 3px 0, 0 3px, 3px 0;
      background-position: 70px -2px, calc(100% + 2px) -1px, 100% 100%,
        -2px 100%;
    }
    20% {
      background-size: 90% 3px, 3px 0, 0 3px, 3px 0;
      background-position: 70px -2px, calc(100% + 2px) -1px, 100% 100%, -2px 100%;
    }
    40% { 
      background-size: 90% 3px, 3px calc(100% + 2px), 0 3px, 3px 0;
      background-position: 70px -2px, calc(100% + 2px) -1px,
        calc(100% + 1px) calc(100% + 2px), -2px 100%;
    }
    60% {
      background-size: 90% 3px, 3px calc(100% + 2px), calc(100% + 2px) 3px,
        3px 0;
      background-position: 70px -2px, calc(100% + 2px) -1px,
        calc(100% + 1px) calc(100% + 2px), -2px 100%;
    }
    100% {
      background-size: 100% 3px, 3px calc(100% + 2px), calc(100% + 2px) 3px,
        3px calc(100% + 2px);
      background-position: 0 -2px, calc(100% + 2px) -1px,
        calc(100% + 1px) calc(100% + 2px), -2px 100%;
/*        border: 2px solid #82c0fe; */
    }
}

.box {
    position:relative;
    border-radius:10px;
      border: 1px solid #ccc;
    width: 25%;
    margin: 2rem auto;  
    padding: 2em;
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #5D26C1, #a17fe0, #59C173),
                        linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173),
                        linear-gradient(to right,#5D26C1, #a17fe0, #59C173),
                        linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);
    animation: bg 2s forwards 1; 
}  

HTML #

<div class="box"></div>

可行方案一：伪元素+clip-path实现圆角边框动画 #

这个方案利用伪元素创建覆盖容器的渐变背景，通过clip-path的动画裁剪出边框效果，完美支持border-radius：

@keyframes border-animate {
  0% {
    clip-path: inset(0 100% 100% 0 round 10px);
  }
  25% {
    clip-path: inset(0 0 100% 0 round 10px);
  }
  50% {
    clip-path: inset(0 0 0 0 round 10px);
  }
  75% {
    clip-path: inset(0 0 0 100% round 10px);
  }
  100% {
    clip-path: inset(0 100% 0 100% round 10px);
    /* 若要停留在完整边框状态，将此处改为 inset(0 0 0 0 round 10px) */
  }
}

.box {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 25%;
  margin: 2rem auto;
  padding: 2em;
}

.box::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 13px; /* 比容器大3px，对应边框厚度 */
  background: linear-gradient(to right, #5D26C1, #a17fe0, #59C173);
  z-index: -1;
  animation: border-animate 2s forwards 1;
}

方案说明 #

• 伪元素::before创建比容器大的渐变背景层，设置匹配的圆角
• 通过clip-path: inset()的动画，逐步显示四条边框区域，模拟绘制边框的效果
• inset()的最后一个参数对应圆角大小，和容器border-radius保持一致

可行方案二：分边伪元素分步动画 #

如果需要贴近原方案的分步绘制效果（先上边部分，再右边，再下边，再左边），可以用四个元素分别模拟四条边框，设置独立动画：

@keyframes top-border {
  0% {
    width: 0;
    left: 30%; /* 对应原方案的起始位置，可根据容器宽度调整 */
  }
  100% {
    width: 100%;
    left: 0;
  }
}

@keyframes right-border {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

@keyframes bottom-border {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes left-border {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.box {
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 25%;
  margin: 2rem auto;
  padding: 2em;
  overflow: hidden; /* 确保边框圆角不溢出 */
}

.box::before,
.box::after,
.box .border-bottom,
.box .border-left {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #5D26C1, #a17fe0, #59C173);
}

/* 上边边框 */
.box::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  animation: top-border 0.5s forwards 0s;
}

/* 右边边框 */
.box::after {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  animation: right-border 0.5s forwards 0.5s;
}

/* 下边边框 */
.box .border-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  animation: bottom-border 0.5s forwards 1s;
}

/* 左边边框 */
.box .border-left {
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  animation: left-border 0.5s forwards 1.5s;
}

对应的HTML：

<div class="box">
  <div class="border-bottom"></div>
  <div class="border-left"></div>
</div>

方案说明 #

• 四个元素分别对应四条边框，设置各自的圆角
• 给每个边框设置独立动画，按顺序播放，还原原方案的分步绘制效果
• 容器设置overflow: hidden，确保边框圆角不超出容器范围

内容的提问来源于stack exchange，提问作者Duy Tịnh