js+css实现注册登录表单切换动画效果代码-html代码-BFW代码库

js+css实现注册登录表单切换动画效果代码

代码语言：html

代码描述：js+css实现注册登录表单切换动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">






    <style>
        *,
        *::before,
        *::after {
                box-sizing: border-box;
        }
        
        body {
                margin: 0;
                font-family: Roboto, -apple-system, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
                background: #3b4465;
        }
        
        .forms-section {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
        }
        
        .section-title {
                font-size: 32px;
                letter-spacing: 1px;
                color: #fff;
        }
        
        .forms {
                display: flex;
                align-items: flex-start;
                margin-top: 30px;
        }
        
        .form-wrapper {
                animation: hideLayer .3s ease-out forwards;
        }
        
        .form-wrapper.is-active {
                animation: showLayer .3s ease-in forwards;
        }
        
        @keyframes showLayer {
                50% {
                        z-index: 1;
                }
                100% {
                        z-index: 1;
                }
        }
        
        @keyframes hideLayer {
                0% {
                        z-index: 1;
                }
                49.999% {
                        z-index: 1;
                }
        }
        
        .switcher {
                position: relative;
                cursor: pointer;
                display: block;
                margin-right: auto;
                margin-left: auto;
                padding: 0;
                text-transform: uppercase;
                font-family: inherit;
                font-size: 16px;
                letter-spacing: .5px;
                color: #999;
                background-color: transparent;
                border: none;
                outline: none;
                transform: translateX(0);
                transition: all .3s ease-out;
        }
        
        .form-wrapper.is-active .switcher-login {
                color: #fff;
                transform: translateX(90px);
        }
        
        .form-wrapper.is-active .switcher-signup {
                color: #fff;
                transform: translateX(-90px);
        }
        
        .underline {
                position: absolute;
                bottom: -5px;
                left: 0;
                overflow: hidden;
                pointer-events: none;
                width: 100%;
                height: 2px;
        }
        
        .underline::before {
                content: '';
                position: absolute;
                top: 0;
                left: inherit;
                display: block;
                width: inherit;
                height: inherit;
                background-color: currentColor;
                transition: transform .2s ease-out;
        }
        
        .switcher-login .underline::before {
                transform: translateX(101%);
        }
        
        .switcher-signup .underline::before {
                transform: translateX(-101%);
        }
        
        .form-wrapper.is-active .underline::before {
                transform: translateX(0);
        }
        
        .form {
                overflow: hidden;
                min-width: 260px;
                margin-top: 50px;
                padding: 30px 25px;
          border-radius: 5px;
                transform-origin: top;
        }
        
        .form-login {
                animation: hideLogin .3s ease-out forwards;
        }
        
        .form-wrapper.is-active .form-login {
                animation: showLogin .3s ease-in forwards;
        }
        
        @keyframes showLogin {
                0% {
                        background: #d7e7f1;
                        transform: translate(40%, 10px);
                }
  .........完整代码请登录后点击上方下载按钮下载查看