输入框边框动画效果实现求助：span包裹输入框失败

嘿，我看了你的代码和想要实现的效果，问题核心在于你没给span设置正确的定位基准和尺寸，导致它没法精准包裹输入框。咱们一步步来修复：

1. 给父容器设置相对定位，锚定span的位置 #

你的span.focus-input100用了绝对定位，但它的父容器.wrap-input100没有设置position: relative，导致span的定位脱离了输入框的范围。给父容器加上这个属性：

.wrap-input100 {
  position: relative;
  width: 100%;
  margin-bottom: 37px;
}

2. 调整span的尺寸，让它刚好包裹输入框 #

现在修改span的样式，让它的尺寸比输入框大4px（上下左右各扩展2px），同时定位到输入框的外层：

span.focus-input100 {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 2px solid #00ad5f;
  border-radius: 3px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s;
  z-index: 1; /* 让span在输入框下方，不遮挡输入操作 */
}

3. 确保输入框的交互层级 #

给输入框加上z-index: 2，保证它在span上方，不会影响用户输入：

input.input100 {
  z-index: 2;
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #555555;
  line-height: 1.2;
  display: block;
  width: 100%;
  height: 45px;
  background: transparent;
  padding: 0 5px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
}

4. 保留原有动画触发逻辑 #

你原来写的焦点和有效值触发动画的样式可以直接用，它会控制span的显示和过渡效果：

input.input100:focus + .focus-input100,
input.input100:valid + .focus-input100 {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

这样修改之后，span就会精准包裹在输入框外层2px的位置，当输入框获得焦点或者内容有效时，就能看到和目标示例一样的动画效果啦～

内容的提问来源于stack exchange，提问作者nishikori