jquery+css多步骤表单注册提交输入效果代码-html代码-BFW代码库

jquery+css多步骤表单注册提交输入效果代码

代码语言：html

代码描述：jquery+css多步骤表单注册提交输入效果代码，每一步输入一条信息，最终提交注册。

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

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

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

    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans");
        *,*:after,*:before {
        box-sizing:border-box
}
body {
        background:#eee;
        font-family:'Open Sans',sans-serif
}
.grop-from {
        width:360px;
        height:70px;
        background:#fff;
        position:fixed;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border-radius:50px
}
.grop-from .form-body {
        height:70px;
        overflow:hidden;
        border-radius:50px
}
.grop-from .form-body .error-text {
        position:absolute;
        left:80px;
        top:4px;
        z-index:25;
        color:#b71c1c;
        font-size:10px;
        font-weight:600;
        display:none
}
.grop-from .form-body .form-controls {
        position:relative;
        z-index:5;
        transition:ease-in .2s;
        top:0
}
.grop-from .form-body .form-controls input {
        display:block;
        width:100%;
        height:70px;
        padding:10px 60px 10px 80px;
        font-size:18px;
        color:#666;
        border:0
}
.grop-from .form-body .form-controls input:focus {
        outline:0
}
.grop-from .form-head {
        position:absolute;
        left:0;
        top:0;
        width:70px;
        height:100%;
        background:#F50057;
        border-radius:50px;
        text-align:center;
        line-height:70px;
        font-size:22px;
        color:#fff;
        cursor:pointer;
        z-index:40;
        box-shadow:0 0 10px rgba(0,0,0,0.15);
        transition:ease-in .2s
}
.grop-from .form-head .text {
        display:none
}
.grop-from .form-head .text:before {
        font-family:'Open Sans',sans-serif
}
.grop-from .form-action {
        position:absolute;
        width:50px;
        height:50px;
        background:#fefefe;
        text-align:center;
        right:10px;
        top:50%;
        border-radius:50px;
        transform:translateY(-50%);
        z-index:50;
        cursor:pointer;
        transition:.3s;
        border:0;
        outline:0;
        color:inherit
}
.grop-from .form-action:hover {
        background:#f9f9f9
}
.grop-from .form-action .icon-action {
        transition:ease-in .2s
}
.grop-from .form-action .icon-action:after {
        line-height:50px;
        content:'arrow_forward'
}
.grop-from .form-action .icon-action.back {
        transform:rotate(180deg)
}
.grop-from .icon-placeholder {
        font-size:40px;
        line-height:70px
}
.grop-from#signup {
        color:#fff
}
.grop-from#signup .form-head {
        width:100%
}
.grop-from#signup .form-head .icon-placeholder {
        display:none
}
.grop-from#signup .form-head .text {
        display:block
}
.grop-from#signup .form-head .text:before {
        content:'Sign Up'
}
.grop-from#signup .form-action {
        right:100px;
        background:0;
        line-height:65px
}
.grop-from#signup .form-action .icon-action.back {
        transform:rotate(0)
}
.grop-from#success {
        color:#fff
}
.grop-from#success .form-head {
        width:100%;
        background:#00E676
}
.grop-from#success .form-head .icon-placeholder {
        display:none
}
.grop-from#success .form-head .text {
        display:block
}
.grop-from#success .form-head .text:before {
        content:'Success'
}
.grop-from#success .form-action {
        right:90px;
        background:0;
        line-height:65px
}
.grop-from#success .form-action .icon-action.back {
        transform:rotate(0)
}
.grop-from#success .form-action .icon-action:after {
        content:.........完整代码请登录后点击上方下载按钮下载查看