css实现丝带包裹的登录注册表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现丝带包裹的登录注册表单效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*--reset--*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        display:block;
}
ol,ul {
        list-style:none;
        margin:0px;
        padding:0px;
}
blockquote,q {
        quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
        content:'';
        content:none;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
/*--start editing from here--*/a {
        text-decoration:none;
}
.txt-rt {
        text-align:right;
}
/* text align right */.txt-lt {
        text-align:left;
}
/* text align left */.txt-center {
        text-align:center;
}
/* text align center */.float-rt {
        float:right;
}
/* float right */.float-lt {
        float:left;
}
/* float left */.clear {
        clear:both;
}
/* clear float */.pos-relative {
        position:relative;
}
/* Position Relative */.pos-absolute {
        position:absolute;
}
/* Position Absolute */.vertical-base {
        vertical-align:baseline;
}
/* vertical align baseline */.vertical-top {
        vertical-align:top;
}
/* vertical align top */nav.vertical ul li {
        display:block;
}
/* vertical menu */nav.horizontal ul li {
        display:inline-block;
}
/* horizontal menu */img {
        max-width:100%;
}
/*--end reset--*/body {
        font-family:Verdana;
        background:url(//repo.bfw.wiki/bfwrepo/image/62254197e677b.png)no-repeat center 0px;
        background-attachment:fixed;
        background-size:cover;
}
h1 {
        font-size:3em;
        text-align:center;
        color:#fff;
        font-weight:100;
}
/*-- main --*/h2 {
        font-size:1.1em;
        text-align:center;
        padding:1.2em;
        background:#02a299;
        color:#fff;
        font-weight:200;
        letter-spacing:10px;
}
.main {
        padding:3em 0 0;
}
.login-form {
        width:35%;
        margin:3.5em auto;
        background:rgba(12,85,105,0.51);
        padding-bottom:4em;
}
.agileits-top {
        padding:2em 3em 3em;
}
.login-form input[type="text"],.login-form input[type="password"] {
        font-size:1em;
        color:#fff;
        padding:0.8em 1em;
        border:0;
        width:93%;
        border-bottom:1px solid #c7c7c7;
        background:none;
        -webkit-appearance:none;
}
/*-- input-effect --*/.styled-input input:focus ~ label,.styled-input input:valid ~ label {
        font-size:1.1em;
        color:#02a299;
        top:-2em;
        -webkit-transition:all 0.125s ease;
        transition:all 0.125s ease;
}
.styled-input {
        width:100%;
        margin:2em 0 1em;
        position:relative;
}
.styled-input label {
        color:#fff;
        padding:0.8em 1em;
        position:absolute;
        top:0;
        left:0;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
        pointer-events:none;
        font-weight:400;
        font-size:1em;
        display:block;
        line-height:1em;
}
.styled-input input ~ span {
        display:block;
        width:0;
        height:2px;
        background:#fff;
        position:absolute;
        bottom:0;
        left:0;
        -webkit-transition:all 0.125s ease;
        transition:all 0.125s ease;
}
.styled-input input:focus {
        outline:0;
}
.styled-input input:focus ~ span {
        width:100%;
        -webkit-transition:all 0.075s ease;
        transition:all 0.075s ease;
        'OpenSans-Regular';
}
/*-- //input-effect --*/.login-form p {
        font-size:1em;
        color:#fff;
        margin:1em 0 .5em;
}
/*-- checkbox --*/.wthree-text input[type="checkbox"] {
        display:none;
}
.wthree-text input[type="checkbox"]+label {
        position:relative;
        padding-left:1.8em;
        border:none;
        outline:none;
        font-size:1em;
        color:#fff;
        cursor:pointer;
        display:block;
}
.wthree-text input[type="checkbox"]+label span:first-child .........完整代码请登录后点击上方下载按钮下载查看