2021/1/19 好看的前端登录界面

演示图

完整代码

<template>
  <div class="big_box">
    <div class="box">
      <h2>Login</h2>
      <form>
        <div class="inputBox">
          <input type="text" name="" required="" />
          <label>Username</label>
        </div>
        <div class="inputBox">
          <input type="password" name="" required="" />
          <label>password</label>
        </div>
        <input type="submit" name="" value="Submit" />
      </form>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.big_box {
  height: 100%;
  border: 1px solid transparent;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fnote%2Fl%2Fpublic%2Fp85987252.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645172993&t=183559be4d2658b6d980795bcdc430eb");
  background-size: cover;
  background-repeat: no-repeat;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  padding: 40px;
  background: transparent;
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 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;
  letter-spacing: 1px;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.box .inputBox label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  letter-spacing: 1px;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label {
  top: -18px;
  left: 0;
  color: #03a9f4;
  font-size: 12px;
}
.box input[type="submit"] {
  background: transparent;

  border: none;
  outline: none;
  color: #fff;
  background: #03a9f4;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}
</style>

 

---

 

演示图

完整代码

<template>
  <div class="box">
    <div id="login_box">
      <h2>lOGIN</h2>
      <div id="form">
        <div id="input_box">
          <i class="fa fa-user" aria-hidden="true"></i>
          <input class="in" type="text" placeholder="Username" />
        </div>
        <div id="input_box">
          <i class="fa fa-key" aria-hidden="true"></i>
          <input class="in" type="passwoprd" placeholder="Passwoprd" />
        </div>
      </div>

      <button>Sign in</button><br />
      <div id="Sign">
        <a href="a">忘记密码?</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box{
    height: 100%;
    border: 1px solid transparent;
    background-image: url('http://inews.gtimg.com/newsapp_ls/0/11535311052/0');
    background-size: cover;
    background-repeat: no-repeat;
}
#login_box{
    width: 25%;
    height: 400px;
    background:#00000040;
    margin:auto;
    margin-top: 10%;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
}
#login_box h2{
    color: #fff;
    margin-top: 5%;
}
#login_box #form #input_box{
    margin-top: 5%;
}
#login_box #form #input_box i{
    color: #fff;
}
#login_box #form #input_box input{
    border:0;
    width: 60%;
    font-size: 15px;
    color: #fff;
    background: #ffffff00;
    border-bottom: 2px solid#fff;
    padding: 5px 10px;
    margin-top: 10px;
}
#login_box button{
    margin-top: 50px;
    width: 40%;
    height: 30px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    font-size: 15px;
    background-image: linear-gradient(to top, #30324d 0%, #5f6298 100%);
}
#login_box #Sign{
    margin-top: 15px;
    margin-left: 60%;
}
#login_box #Sign a{
    color: #fff;
}
 

</style>