jquery实现平滑式登录注册表单切换效果代码-html代码-BFW代码库

jquery实现平滑式登录注册表单切换效果代码

代码语言：html

代码描述：jquery实现平滑式登录注册表单切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>



    <style>
        body{
          background-color: #A8A8A8;
          font-family: 'Roboto', sans-serif;
        }
        
        .container{
          /*border:1px solid white;*/
          width: 600px;
          height: 350px;
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%, -50%);
          display: inline-flex; 
        }
        .backbox{  
          background-color: #404040;
          width: 100%;
          height: 80%;
          position: absolute;
          transform: translate(0,-50%);
          top:50%;
          display: inline-flex;
        }
        
        .frontbox{
          background-color: white;
          border-radius: 20px;
          height: 100%;
          width: 50%;
          z-index: 10;
          position: absolute;
          right:0;
          margin-right: 3%;
          margin-left: 3%;
          transition: right .8s ease-in-out;
        }
        
        .moving{
          right:45%;
        }
        
        .loginMsg, .signupMsg{
          width: 50%;
          height: 100%;
          font-size: 15px;
          box-sizing: border-box;
        }
        
        .loginMsg .title,
        .signupMsg .title{
          font-weight: 300;
          font-size: 23px;
        }
        
        .loginMsg p,
        .signupMsg p {
          font-weight: 100;
        }
        
        .textcontent{
          color:white;
          margin-top:65px;
          margin-left: 12%;
        }
        
        .loginMsg button,
        .signupMsg button {
          background-color: #404040;
          border: 2px solid white;
          border-radius: 10px;
          color:white;
          font-size: 12px;
          box-sizing: content-box;
          font-weight: 300;
          padding:10px;
          margin-top: 20px;
        }
        
        /* front box content*/
        .login, .signup{
          padding: 20px;
          text-align: center;
        }
        
        .login h2,
        .signup h2 {
          color: #35B729;
          font-size:22px;
        }
        
        .inputbox{
          margin-top:30px; 
        }
        .login input, 
        .signup input {
          display: block;
          width: 100%;
          height: 40px;
          background-color: #f2f2f2;
          border: none;
          margin-bottom:20px;
          font-size: 12px;
        }
        
        .login button,
        .signup button{
          background-color: #35B729;
          border: none;
          color:white;
          font-size: 12px;
          font-weight: 300;
          box-sizing: content-box;
          padding:10px;
          border-radius: 10px;
          width: 60px;
          position: absolute;
          right:30px;
          bottom: 30px;
          cursor: pointer;
        }
        
        /* Fade In & Out*/
        .login p {
          cursor: pointer;
          color:#404040;
          font-size:15px;
        }
        
        .loginMsg, .signupMsg{
          /*opacity: 1;*/
          transition: opacity .8s ease-in-out;
 .........完整代码请登录后点击上方下载按钮下载查看