css实现自适应丝带丝巾登录注册表单效果代码
代码语言: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:2px solid #fff; position:absolute; left:0; top:2px; } .wthree-text input[type="checkbox"]:checked+label span:first-child:before { content:""; background:url(//repo.bfw.wiki/bfwrepo/images/chat/tick.png)no-repeat; position:absolute; left:2px; top:2px; font-size:10px; width:10px; height:10px; } /*-- //checkbox --*/.wthree-text { margin-top:2.5em; } .agileits-bottom { position:relative; margin:3em -3em 0; } .agileits-bottom:before { content:''; position:absolute; top:-17px; left:-17px; width:0; height:0; border-top:17px solid transparent; border-right:17px 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; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; transition:.5s all; } .agileits-bottom input[type="submit"] { font-size:1.5em; color:#FF9800; background:#fff; outline:none; cursor:pointer; padding:0.6em 0; -webkit-appearance:none; border:none; width:106%; margin-left:-0.7em; } .agileits-bottom input[type="submit"]:hover { color:#FFF; background:#FF9800; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; transition:.5s all; } .agileits-bottom:hover:before { border-right-color:#FF9800; } .agileits-bottom:hover:after { border-left-color:#FF9800; } .w3agile-btm { padding:2em 0; text-align:center; } .w3agile-btm p a { font-size:1em; color:#fff; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; transition:.5s all; margin-left:6px; } .w3agile-btm p a:hover { color:#FF9800; } /*-- //main --*//*-- copyright --*/.copyright { margin:1em 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:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0