转型起源

Question

我目前正在制作一个非常简单的登录页面。我希望.form input[type="text"]:focus, .form input[type="password]之间的过渡，而不是逐渐淡化颜色，它从左到右掠过新的颜色。

这是我的代码：

＆＃13;

＆＃13;

.form input[type="text"],
.form input[type="password"] {
  margin-top: 0;
  margin-bottom: 5px;
  border: none;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: black;
  background: transparent;
  outline: none;
  height: 2.5vh;
  color: black;
  border-radius: 0;
  font-size: 100%;
  transition-property: border-bottom-color;
  transition-duration: 350ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

.form input[type="text"]:focus,
.form input[type="password"]:focus {
  border-bottom-color: #66bb6a;
}

＆＃13;

<form class="form">
  <input type="text" name="" placeholder="example@example.com">
</form>

＆＃13;

＆＃13;

＆＃13;

这是一个JS小提琴：https://jsfiddle.net/juja15ro/

Answer 1

我能够用javascript做到这一点。

＆＃13;

＆＃13;

const inputs = document.querySelectorAll('.input-container input');
inputs.forEach((input) => {
	input.addEventListener('focus', () => {
  	input.parentElement.classList.add('focused');
  })
  input.addEventListener('blur', () => {
  	input.parentElement.classList.remove('focused');
  })
})

＆＃13;

.input-container {
  position: relative;
  display: inline-block;
}

.input-container:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #000;
  transition: .24s ease-out;
}

.input-container input {
  border: none;
  background: transparent;
  border-bottom: 1px solid #ccc;
  outline: none;
}

.input-container.focused:after {
  width: 100%;
}

＆＃13;

<div class="input-container">
  <input type="text" placeholder="Name">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我创建了span(input bar)并向其添加了:before和:after属性，并且从左到右移动，before应为0%和{ {1}} r应为afte。（同时尝试100%至before和50%至after，并查看从中心开始的移动效果）此处＆＃39 ;是我的代码

＆＃13;

＆＃13;

50%

＆＃13;

*:focus {
  outline: none;
}

input {
  display: block;
  border: none;
  border-bottom: 1px solid #000;
  font-family: Trebuchet MS;
  background: none;
}

.inputBar {
  position: relative;
  display: block;
  width: 290px;
}

.inputBar:before,
.inputBar:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 0;
  background: #66bb6a;
  height: 2px;
  transition: all 0.2s ease;
}

.inputBar:after {
  right: 100%;
}

.inputBar:before {
  left: 0%;
}

input:focus~.inputBar:before,
input:focus~.inputBar:after {
  width: 50%;
}

＆＃13;

＆＃13;

＆＃13;