CSS3表单动画故障

时间：2017-11-21 14:10:44

标签： html css animation

我正在尝试使用一些动画创建一个表单。在动画期间更改标签文本的位置和大小。 但是在动画期间，输入字段的底部边框也会向上移动一点位置。如何纠正这个问题？

当不操作font-size时，动画工作正常。 单击输入字段以触发动画。 代码段如下：

$(document).ready(function(){
  $('#user').on("click",function(){
    $('#userLabel').addClass("label-animation");
  });
  $('#pass').on("click",function(){
    $('#passLabel').addClass("label-animation");
  });
});
body {
  background-color: #312323;
}

.card-style {
  margin: auto;
  margin-top: 10rem;
  width: 35rem;
  box-shadow: 0px 0px 35px 7px #170a09;
  background: -moz-linear-gradient(45deg, rgba(160, 121, 201, 1) 0%, rgba(227, 168, 132, 1) 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(160, 121, 201, 1)), color-stop(100%, rgba(227, 168, 132, 1)));
  color: white;
}

#user,
#pass,
#subBtn {
  border-radius: 0px;
  border: 2px solid transparent;
  transition: all 0.5s;
}

#user,
#pass {
  border-bottom: 2px solid white;
  background-color: transparent;
}

#userLabel,
#passLabel {
  transform: translate(0px, 45px);
  font-size: 1.25rem;
}

#subBtn:hover {
  cursor: pointer;
  border: 2px solid white;
  color: white;
  transition: all 0.3s;
  background: transparent;
}

#user:focus,
#pass:focus {
  box-shadow: none;
  border: 2px solid transparent;
  border-bottom: 2px solid #6827b0;
}

#subBtn {
  background-color: #fddb7a;
  font-weight: 600;
}

.label-animation {
  animation-name: labelAnimate;
  animation-delay: 0.2s;
  animation-duration: 1s;
}

@keyframes labelAnimate {
  from {
    transform: translate(0px, 45px);
    font-size: 1.25rem;
  }
  to {
    transform: translate(0px, 10px);
    font-size: 16px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
    <html lang="en">
      <head>
        <title>Form#1</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css" >
      </head>
      <body>
        <div class="card card-style">

                <div class=card-body>

                  <h3 class="card-title text-center text-normal">Sign In</h3>
                    <form>

                        <div class="form-group" style="height:100px">

                            <label id="userLabel">Username </label>
                            <input type="text" class="form-control form-control-lg" id="user">

                        </div>
                        <div class="form-group" style="height:100px">

                            <label id="passLabel">Password </label>
                            <input type="password" class="form-control form-control-lg" id="pass">


                        </div>
                        <a href=# style="color:white"><small class="form-text">Forget password?</small></a><br>
                        <button type="submit" class="btn btn-default btn-block" id="subBtn">Submit</button>
                    </form>

            </div>

          </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
      </body>
    </html>

1 个答案:

答案 0 :(得分：0)

我已经完成了这件事。我将标签的位置更改为absolute（父级div为亲戚），并将padding-top添加到父级div。我添加的Css位于css块的底部。类form-gropup-relative被添加到标签的父div。发生这种情况是因为您更改了font-size因此，父div的高度也发生了变化，所以边框向上移动

＆＃13;
＆＃13; 
body {
  background-color: #312323;
}

.card-style {
  margin: auto;
  margin-top: 10rem;
  width: 35rem;
  box-shadow: 0px 0px 35px 7px #170a09;
  background: -moz-linear-gradient(45deg, rgba(160, 121, 201, 1) 0%, rgba(227, 168, 132, 1) 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(160, 121, 201, 1)), color-stop(100%, rgba(227, 168, 132, 1)));
  color: white;
}

#user,
#pass,
#subBtn {
  border-radius: 0px;
  border: 2px solid transparent;
  transition: all 0.5s;
}

#user,
#pass {
  border-bottom: 2px solid white;
  background-color: transparent;
}

#userLabel,
#passLabel {
  transform: translate(0px, 45px);
  font-size: 1.25rem;
}

#subBtn:hover {
  cursor: pointer;
  border: 2px solid white;
  color: white;
  transition: all 0.3s;
  background: transparent;
}

#user:focus,
#pass:focus {
  box-shadow: none;
  border: 2px solid transparent;
  border-bottom: 2px solid #6827b0;
}

#subBtn {
  background-color: #fddb7a;
  font-weight: 600;
}

.label-animation {
  animation-name: labelAnimate;
  animation-delay: 0.2s;
  animation-duration: 1s;
}

@keyframes labelAnimate {
  from {
    transform: translate(0px, 45px);
    font-size: 1.25rem;
  }
  to {
    transform: translate(0px, 10px);
    font-size: 16px;
  }
}

.form-gropup-relative {
  position: relative;
  padding-top: 50px;
}

.form-gropup-relative label {
  position: absolute;
  left: 0;
  top: 0;
}
＆＃13; 
<!doctype html>
    <html lang="en">
      <head>
        <title>Form#1</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css" >
      </head>
      <body>
        <div class="card card-style">

                <div class=card-body>

                  <h3 class="card-title text-center text-normal">Sign In</h3>
                    <form>

                        <div class="form-group form-gropup-relative" style="height:100px">

                            <label id="userLabel" class="label-animation">Username </label>
                            <input type="text" class="form-control form-control-lg" id="user">

                        </div>
                        <div class="form-group form-gropup-relative" style="height:100px">

                            <label id="passLabel">Password </label>
                            <input type="password" class="form-control form-control-lg" id="pass">


                        </div>
                        <a href=# style="color:white"><small class="form-text">Forget password?</small></a><br>
                        <button type="submit" class="btn btn-default btn-block" id="subBtn">Submit</button>
                    </form>

            </div>

          </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
      </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题