jquery实现炫酷卡片式登录注册表单页面代码-html代码-BFW代码库

jquery实现炫酷卡片式登录注册表单页面代码

代码语言：html

代码描述：jquery实现炫酷卡片式登录注册表单页面代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html {
                margin: 0;
                height: 100%
        }
        
        body {
                margin: 0;
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                display: -webkit-flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                background: #2196F3
        }
        
        .form-collection {
                width: 350px;
                height: 350px
        }
        
        .limit-width {
                width: 300px
        }
        
        .absolute-footer {
                bottom: 0;
                left: 0;
                position: absolute;
                z-index: 1;
                text-align: center;
                font-family: "Roboto",sans-serif;
                font-size: 27.2px;
                font-size: 1.7rem;
                font-weight: 300;
                padding: 15px;
                background: rgba(0,0,0,0.4);
                color: #fff
        }
        
        .form-collection {
                z-index: 2
        }
        
        .card {
                font-family: "Open Sans",sans-serif;
                background: #fff;
                position: absolute;
                -webkit-transition: .3s ease all;
                transition: .3s ease all
        }
        
        .card-body {
                padding: 20px
        }
        
        .box-btn {
                text-decoration: none;
                text-align: center;
                text-transform: uppercase;
                display: block;
                padding: 15px;
                font-size: 16px;
                font-weight: 500;
                color: #444;
                background: rgba(0,0,0,0);
                -webkit-transition: .2s ease all;
                transition: .2s ease all;
                border-radius: 3px
        }
        
        .box-btn:hover {
                background: rgba(0,0,0,0.06)
        }
        
        .box-btn:active {
                background: rgba(0,0,0,0.1)
        }
        
        .input-group {
                border: 2px solid #eee;
                position: relative;
                background: #eee;
                margin: 25px 0;
                border-radius: 2px;
                overflow: hidden;
                padding: 10px
        }
        
        .input-group input {
                border: 0;
                background: transparent;
                width: 100%;
                outline: 0;
                font-weight: 500;
                font-family: "Open Sans",sans-serif;
                font-size: 16px
        }
        
        .input-group label {
                position: absolute;
                top: 10px;
                left: 0;
                padding-left: 10px;
                font-weight: 500;
                color: #aaa
        }
        
        .card-footer button {
                width: 100%;
                padding: 25px;
                font-size: 24px;
                font-size: 1.5rem;
                text-transform: uppercase;
                font-weight: 600;
                background: #4CAF50;
                border: 0;
                color: #fff;
                box-shadow: none;
                outline: 0;
                cursor: pointer
        }
        
        .above {
                z-index: 1
        }
        
        .below {
                z-index: 0
        }
        
        .turned {
                opacity: .8;
                -ms-filter: "alpha(opacity=80)"
        }
        
        .sign-up-card,.log-in-card {
                box-shadow: 0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)
        }
        
        .sign-up-card.turned {
                filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.8" /></filter></svg>#filter');
                -webkit-filter: blur(0.8px);
                filter: blur(0.8px);
                webkit-filter: blur(0.8px);
                -webkit-transform: rotateZ(-90deg) translate3d(0,100px,0) scale(0.7);
                transform: rotateZ(-90deg) translate3d(0,100px,0) scale(0.7);
                box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)
        }
        
        .log-in-card.turned {
                filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1" /></fil.........完整代码请登录后点击上方下载按钮下载查看