Question

我有一组输入字段，我想设置边框底部的动画，以便仅使用CSS动画在焦点上从左向右滑动。我尝试了以下代码但没有任何反应。我是CSS动画的新手。

HTML

登录

CSS

1[System.String], System.Linq.Expressions.Expression

我不确定我做了什么。这是fiddle

Answer 1

由于您无法在input等单个标记元素上使用伪元素，因此您可以将input包裹在label中并使用span作为边框...并为width而不是scale设置动画。

＆＃13;

label {
  display: inline-block;
  width: 83%;
  overflow: hidden;
}
.fields {
  color: #646c70;
  border: none;
  outline: none;
  padding: 10px;
  width: 100%;
}
.fields + span {
  display: block;
  border-bottom: solid 3px #019fb6;
  width: 0;
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
}
.fields:focus + span {
  width: 110%;          /*  used calc first, but won't work on Edge  */
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
}

＆＃13;

<label>
  <input class="fields" id="password" type="password" placeholder="Password">
  <span></span>
</label>

＆＃13;

滑动输入字段的下边框不起作用

1 个答案: