css完成动态有趣登录页面

用css完成简单动态登录页面)
图片最终效果：

完成功能：鼠标点击输入框input时，label标签内容会上移；鼠标经过按钮时，按钮会放大。

html里body的代码块

<div class="box">
    <h2>Login</h2>
    <form>
      <div class="inputbox">
        <input type="text" name="" id="">
        <label for="">Username</label>
      </div>
      <div class="inputbox">
        <input type="password" name="" id="">
        <label >password</label>
      </div>
      <input type="submit" class="sub">
    </form>
  </div>

css的代码块

body{
  padding:0;
  margin: 0;
  background: url(1.jpg);
  /* 背景设置全屏覆盖 */
  background-size: cover;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  padding: 40px;
  background:rgba(0,0,0,0.8);
  /* 阴影 */
  box-shadow: 0 15px 25px rgba(0,0,0,.5);
  border-radius: 10px;
}
.box h2{
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}
.box  .inputbox{
  position: relative;
  
}
.box .inputbox input{
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  /* 背景设置透明 */
  background: transparent;
 border: none;
 border-bottom: 1px solid #fff;
}
.box .inputbox label{
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}
.box .inputbox input:focus ~label{
  /* 当鼠标在input时，label内容往上移 */
 top:-20px;
 left: 0;
 color: teal;
 font-size: 13px;
}
.box .sub{
  padding: 10px 30px;
  cursor: pointer;
  color: #fff;
  /* 渐变背景色 */
  background: linear-gradient(to left,#7FFFAA,#00FA9A,#3CB371);
  border: none;
  border-radius: 7px;
  margin-left: 40%;
}
.box .sub:hover{
  /* 鼠标经过按钮时放大 */
  transform: scale(1.3);
  /* 放大的速度设置 */
  transition: 0.6s;
}

我html和css页面是分开写的，记得在html页面引入css样式~

<link rel="stylesheet" href="/1.css">