页面的head部分需要设置好CSS样式，由于难度不大，以下直接提供代码：

body {
  font-size: 20px;  
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  background: #fff;
}

form {
  width: 300px;
  margin: 20px auto;
}

fieldset {
  position: relative;
  border: none;  
}

label {
  position: absolute;
  top: 18px;
  margin-left: 15px;
  color: rgba(0, 0, 0, 0.3);
  transform-origin: left;
  transition: all 0.3s ease;
}

input:focus ~ label {
  color: #26c7fc;  
}

input:focus ~ label,
input:valid ~ label {
  top: 0;
  transform: scale(0.6, 0.6);
}

input {
  font-size: 20px;  
  width: 100%;
  border: none;  
  margin-top: 10px;
  padding: 5px 15px;
}

input:focus {
  outline: none;
}

.after {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #26c7fc 50%, transparent 50%);
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.6s ease;
}

input:focus ~ .after {
  background-position: 0 0;
}

button {
  position: relative;
  width: 100%;
  font-size: 20px;  
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  line-height: 2;
  margin-top: 20px;
  padding: 3px 10px;
  color: rgba(0, 0, 0, 0.4);
  background: white;
  border: none;
  background: linear-gradient(to right, #26c7fc 50%, transparent 50%);
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.6s ease;
  border-radius: 5px;
}

button:before {
  position: absolute;
  content: "立即登录";
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: block;
  background-color: white;
  border-radius: 3px;
}

button:active,
button:focus,
button:hover {
  outline: none;
  background-position: 0 0;
  color: #26c7fc;
}

页面的body部分用三个fieldset，分别放置不同用处的input输入框还有底部的登录按钮，比较容易读懂，代码如下：

<fieldset>
  <input id="uname" type="text" name="uname" required>
  <label for="uname">用户名</label>
  <div class="after"></div>
</fieldset>
<fieldset>
  <input id="upswd" type="text" name="upswd" required>
  <label for="upswd">密码</label>
  <div class="after"></div>
</fieldset>
<fieldset>
  <button>立即登录</button>
</fieldset>