css实现丝带包裹的登录注册表单效果代码
代码语言: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 { width:14px; height:14px; border:2px solid #fff; position:absolute; left:0; top:2px; } .wthree-text input[type="checkbox"]:checked+label span:first-child:before { content:""; background:url(../images/tick.png)no-repeat; position:absolute; left:2px; top:2px; font-size:10px; width:10px; height:10px; } /*-- //checkbox --*/.wthree-text { margin-top:3em; } .wthree-text ul li { display:inline-block; float:left; } .wthree-text ul li:nth-child(2) { float:right; } .wthree-text ul li a { font-size:1em; color:#fff; } .wthree-text ul li a:hover { color:#02a299; } .agileits-bottom { position:relative; } .agileits-bottom:before { content:''; position:absolute; top:-17px; left:-17px; width:0; height:0; border-top:17px solid transparent; border-right:18px solid #fff; transition:.5s all ease; } .agileits-bottom:after { content:''; position:absolute; top:-17px; right:-17px; width:0; height:0; border-left:17px solid #fff; border-top:17px solid transparent; transition:.5s all ease; } .agileits-bottom input[type="submit"] { font-size:1.5em; color:#02a299; background:#fff; outline:none; cursor:pointer; padding:1em 0; -webkit-appearance:none; border:none; width:106%; margin-left:-0.7em; text-transform:uppercase; } .agileits-bottom input[type="submit"]:hover { color:#FFF; background:#02a299; transition:.5s all ease; } .agileits-bottom:hover:before { border-right-color:#02a299; } .agileits-bottom:hover:after { border-left-color:#02a299; } /*-- //main --*//*-- copyright --*/.copyright { margin:2em 0; text-align:center; } .copyright p { font-size:1em; color:#fff; line-height:1.8em; } .copyright p a { color:#fff; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; transition:0.5s all; } .copyright p a:hover { color:#000; } /*-- //copyright --*//*-- responsive-design --*/@media(max-width:1440px) { .agileits-bottom input[type=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0