css实现自适应丝带丝巾登录注册表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现自适应丝带丝巾登录注册表单效果代码

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

<!DOCTYPE html>
<html>

<head>
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    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-color:#fff;
        background:url(//repo.bfw.wiki/bfwrepo/image/5e32401972114.png)no-repeat center 0px;
        background-attachment:fixed;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        background-size:cover;
}
h1 {
        font-size:3em;
        text-align:center;
        color:#fff;
        font-weight:100;
}
/*-- main --*/ .w3layouts-main {
        padding:2em 0 0;
}
.agilesign-form {
        width:35%;
        margin:2em auto;
        background:rgba(2,29,20,0.6);
}
.agileits-top {
        padding:1em 3em 0;
}
.agilesign-form input[type="text"],.agilesign-form input[type="password"] {
        font-size:1em;
        color:#fff;
        padding:0.8em .5em;
        border:0;
        width:96%;
        border-bottom:1px solid #fff;
        background:none;
        -webkit-appearance:none;
}
/*-- input-effect --*/.styled-input input:focus ~ label,.styled-input input:valid ~ label {
        font-size:1em;
        color:#FF9800;
        top:-1.5em;
        -webkit-transition:all 0.125s ease;
        -moz-transition:all 0.125s ease;
        -o-transition:all 0.125s ease;
        -ms-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 .5em;
        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:#FF9800;
        position:absolute;
        bottom:0;
        left:0;
        -webkit-transition:all 0.125s ease;
        -moz-transition:all 0.125s ease;
        -o-transition:all 0.125s ease;
        -ms-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;
        -moz-transition:all 0.075s ease;
        -o-transition:all 0.075s ease;
        -ms-transition:all 0.075s ease;
        transition:all 0.075s ease;
}
/*-- //input-effect --*/.agilesign-form p {
        font-size:1em;
        color:#fff;
}
/*-- 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 {
        width:14px;
        height:14px;
        border.........完整代码请登录后点击上方下载按钮下载查看