css实现好看的登录界面

页面预览

静态图

动态图

HTML代码

<template>
<div>
  <div id="login_bg">
    <div>
      <div id="login_form" v-on:mouseleave="mouseout3" v-on:mouseover="mouseover3">
        <form action="">
          <div id="account_bg" v-on:mouseover="mouseover1" v-on:mouseleave="mouseout1">
            <div class="hengXian" id="hengXian1"></div>
            <input type="text" class="s" id="account" value="请输入账号" >
            <div class="hengXian" id="hengXian2"></div>

          </div>
          <div id="password_bg" v-on:mouseover="mouseover2" v-on:mouseleave="mouseout2">
            <p id="miMa" >请输入密码</p>
            <div class="hengXian" id="hengXian3"></div>
            <input type="password" class="s" id="password" >
            <div class="hengXian" id="hengXian4"></div>
          </div>
          <input type="submit" id="send" value="登录">
        </form>
        <router-link to="" id="forget">忘记密码</router-link>
        <router-link to="" id="register">注册账号</router-link>
      </div>
    </div>
  </div>
</div>

是用vue写的，v-on绑定事件，< router-link >标签就是< a > 标签

css代码

#login_bg{
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url("../assets/img/login-bg.gif");
  background-position: -400px -300px;
}

#login_bg #login_form{
  position: absolute;
  top:50%;
  left: 50%;
  height: 50%;
  width: 40%;
  transform: translate(-50%,-50%);
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  border-radius: 15px;
  background: white;
  opacity: 0.3;
  transition: 0.3s;
}


#login_bg #login_form form{
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  height: 500px;
  width: 300px;
  transform: translate(-50%,-50%);
}

#login_bg #login_form .hengXian{
  display: block;
  width:305px;
  height:2px;
  margin:0px auto;
  padding:0px;
  background-color: #aaaaaa;
  overflow:hidden;
  transition: 0.3s;
  border-radius: 9px;
}

#login_bg #login_form .s{
  display: block;
  border : none;
  outline: none;
  height: 30px;
  width: 300px;
  font-size: 12px ;
  color: #aaaaaa;
  transition: 0.1s;
}

#login_bg #login_form #account_bg:hover>#hengXian1{
  transform: translate(0,-5px) ;
  transition: 0.3s;
}
#login_bg #login_form #account_bg:hover>#hengXian2{
  transform: translate(0,5px) ;
  transition: 0.3s;
}

#login_bg #login_form #password_bg:hover>#hengXian3{
  transform: translate(0,-5px) ;
  transition: 0.3s;
}
#login_bg #login_form #password_bg:hover>#hengXian4{
  transform: translate(0,5px) ;
  transition: 0.3s;
}
#login_bg #login_form #account_bg{
  height: 40px;
  width: 300px;
  left: 50%;
  transform: translate(-50%,-50%);
  position: relative;
  top:130px ;
}

#miMa{
  transition: 0.3s;
  font-size: 12px;
  color: #aaaaaa;
  position: absolute;
  top:-2px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

#login_bg #login_form #password_bg{
  height: 40px;
  width: 300px;
  left: 50%;
  transform: translate(-50%,-50%);
  position: relative;
  top:180px ;
}

#login_bg #login_form #send{
  width: 300px;
  height: 30px;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  left: 50%;
  transform: translate(-50%,-50%);
  position: relative;
  top:220px ;
  background: coral;
  color: white;
}

#login_bg #forget,#register{
  position: relative;
  color: #aaaaaa;
  font-size: 12px;
  text-decoration: none;
}

#login_bg #forget{
  top:-220px;
  left: 240px;
}
#login_bg #register{
  top:-220px;
  left: 260px;
}

JavaScript代码

鼠标移入输入框里的内容为“请输入账号”就把值设为""然后等待输入,鼠标移出时如果输入框里没有内容显示“请输入账号”.

同时密码框不能显示字符只能显示小点点，所以密码框的提示字符串其实是另外一个p标签的内容.

mouseover1(){
      let accout=document.getElementById("account");
      accout.style.color="#393939";
      accout.style.fontSize="18px";
      if(accout.value==="请输入账号"){
        accout.value="";
      }
    },
    mouseover2(){
      let x=document.getElementById("miMa");
      let y=document.getElementById("password");
      x.innerText="";
      y.style.fontSize="18px";
      y.style.color="#393939";
    },
    mouseout1(){
      let accout=document.getElementById("account");
      if(accout.value===""){
        accout.style.fontSize="12px";
        accout.style.color="#aaaaaa";
        accout.value="请输入账号";
      }
    },
    mouseout2(){
      let x=document.getElementById("miMa");
      let y=document.getElementById("password");
      if(y.value===""){
        x.innerText="请输入密码";
        y.style.fontSize="12px";
        y.style.color="#aaaaaa";
      }
    },
    mouseover3(){
      document.getElementById("login_form").style.opacity="0.7";
    },
    mouseout3(){
      document.getElementById("login_form").style.opacity="0.3";
    }
  }