Question

当我集中/不集中密码时，不会晃动，但是当我集中/不集中用户名时，密码shakes ...

为什么会这样以及如何阻止呢？

body {
  background-color: royalblue; /*#f0f0f0;*/
}

label {
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  z-index: -1;
  border: 0; 
  color: white;
  position: relative;
}

.head {
  color: white;
  margin-left: 44%;
  font-family: monospace;
  font-size: 25px;
}

/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/

.password {
  margin-top: 5%;
}

form {
  position: relative;
}

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0; /* BORDER yes/no */
  border-bottom: 2px solid beige; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 

/*input:focus {
  outline: 1;
}*/

label::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 180px;
  height: 25px;
  border-radius: 2px;
  transition: transform .3s;
}

label::after{
  z-index: -1;
  background: beige; /*#a86bf;*/   
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}

input:focus {
  border-radius: 2px;
}

input:focus + label::after,
input:valid + label::after {
  transform: scale3d(1, -1.3, 1);
  transition-timing-function: linear;
  top: -1px;
}

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top .5s ease, font-size .5s ease; 
 /* transition: transform 1s 2s;*/
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 15px; 
}

/* font-family: monospace;*/
 /*transform: translate3d(0, -80%, 0); */
 /* transition-timing-function: linear;*/

<p class="head">Sign In</p>
<form>
  <div class="content"> 
    <div class="username">
      <input name="name" class="user-input" id="user" required>
      <label class="user-label" for="user"><span>Username</span></label>
    </div>
    <div class="password">
      <input name="name" class="pass-input" id="pass" required>
      <label class="pass-label" for="pass"><span>Password</span></label>
    </div>  
  </div>
</form>

Answer 1

为两个div容器添加高度，以便在单击时保持高度。

body {
  background-color: royalblue; /*#f0f0f0;*/
}

label {
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  z-index: -1;
  border: 0; 
  color: white;
  position: relative;
}

.head {
  color: white;
  margin-left: 44%;
  font-family: monospace;
  font-size: 25px;
}

.username {
  height:40px;
}
.password {
  height:40px;
}


/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/

.password {
  margin-top: 5%;
}

form {
  position: relative;
}

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0; /* BORDER yes/no */
  border-bottom: 2px solid beige; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 

/*input:focus {
  outline: 1;
}*/

label::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 180px;
  height: 25px;
  border-radius: 2px;
  transition: transform .3s;
}

label::after{
  z-index: -1;
  background: beige; /*#a86bf;*/   
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}

input:focus {
  border-radius: 2px;
}

input:focus + label::after,
input:valid + label::after {
  transform: scale3d(1, -1.3, 1);
  transition-timing-function: linear;
  top: -1px;
}

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top .5s ease, font-size .5s ease; 
 /* transition: transform 1s 2s;*/
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 15px; 
}

/* font-family: monospace;*/
 /*transform: translate3d(0, -80%, 0); */
 /* transition-timing-function: linear;*/

<p class="head">Sign In</p>
<form>
  <div class="content"> 
    <div class="username" >
      <input name="name" class="user-input" id="user" required>
      <label class="user-label" for="user"><span>Username</span></label>
    </div>
    <div class="password" >
      <input name="name" class="pass-input" id="pass" required>
      <label class="pass-label" for="pass"><span>Password</span></label>
    </div>  
  </div>
</form>

Answer 2

我认为这是因为您的CSS在<div class="username">的底部增加了一个很小的空白，这导致了您的“晃动”。单击“密码”时未发生密码的原因是因为密码下方没有任何内容。

当我关注/不关注时，密码输入会震动。

2 个答案: