登录界面hover效果

html

 <div class="login">
    <h1>login</h1>
    <form action="">
      <input type="text" placeholder="账号">
      <input type="text" placeholder="密码">
      <button>登录</button>
    </form>
  </div>

css

*{
  margin: 0;
  padding: 0;
  color: #eee;
  box-sizing: border-box;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(12, 41, 41);
}
.login{
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 width: 300px;
 height: 450px;
 padding: 20px 0px;
  background-color: rgb(21, 75, 75);;
  border-radius: 10px;
  box-shadow: 10px 20px 10px rgba(33, 44, 55, .3);
}
h1{
  font-size: 45px;
  font-weight: 400;
  z-index: 1;
}
form{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 230px;
  z-index: 1;
}
input{
width: 200px;
height: 40px;
background-color: transparent;
border: none;
border-bottom: 2px solid #eee;
font-size: 16px;
outline: none;
}
input::placeholder{
  font-size: 12px;
outline: none;
}
button{
  width: 180px;
  height: 36px;
  border: 1px solid #eee;
  border-radius: 18px;
  background-color: transparent;
  font-size: 14px;
  cursor: pointer;
}
span{
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 0;
  background-color: pink;
  transform: translate(-50%,-50%);
  border-radius: 50%;

}
/* 进入的动画 */
@keyframes in{
  0%{
    width: 0;
    height: 0;
  }
  100%{
    width: 1200px;
    height: 1200px;
  }
}
/* 离开的动画 */
@keyframes out{
  0%{
    width: 1200px;
    height: 1200px;
  }
  100%{
    width: 0;
    height: 0;
  }
}

js

 //获取login
    var login =document.querySelector('.login')
    let span
    //开启定时器
    let inTime, outTime
    let isIn=true
let isOut
    // 鼠标进入
    login.addEventListener('mouseenter',function(e){
      isOut=false//关闭
     if(isIn){
      inTime=new Date().getTime()
      //生成span的值
   span=document.createElement('span')
      login.appendChild(span)
      //span使用in动画
      span.style.animation='in .5s ease-out forwards'
      //计算出top的值
     let  top=e.clientY-e.target.offsetTop
      //计算出let的值
      let  left=e.clientX-e.target.offsetLeft
      span.style.top=top+'px'
      span.style.left=left+'px'
      isIn=false//执行完关闭
      isOut=true
     }

    })
       // 鼠标离开
       login.addEventListener('mouseleave',function(e){
        if(isOut){
  //获取鼠标离开的时间
  outTime=new Date().getTime()
        //时间差
        let passTime=outTime-inTime
        if(passTime<200){
          setTimeout(mouseleave,500-passTime)
        }else{
          mouseleave()
        }
        }
      
    function mouseleave(){
//span使用in动画
span.style.animation='out .5s ease-out forwards'
      //计算出top的值
     let  top=e.clientY-e.target.offsetTop
      //计算出let的值
      let  left=e.clientX-e.target.offsetLeft
      span.style.top=top+'px'
      span.style.left=left+'px'
        //给定时器，因为动画有延迟时间
  setTimeout(() => {
    login.removeChild(span)//鼠标进入就会创建一个span，离开就可以删除
    isIn=true//鼠标执行完离开才开启
  }, 500);    
    }
 

    })