jquery实现层叠式登录注册反馈表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现层叠式登录注册反馈表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-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 *//*end reset*/body { font-family:Verdana; padding:0; margin:0; background:#34bc9d; 'Roboto Condensed',sans-serif; } h1,h2,h3,h4,h5,h6 { margin:0; } p { margin:0; } ul { margin:0; padding:0; } .content { padding:3em 0; } .content h1 { text-align:center; font-size:3em; margin:0 0 2em 0; 'Abril Fatface',cursive; color:#FFFFFF; letter-spacing:4px; } .w3ls-slider { width:500px; margin:0 auto; height:755px; } .hub-slider { position:relative; } .hub-slider ul { list-style:none; } .hub-slider ul li { width:100%; height:580px; color:#fff; position:absolute; border-radius:5px; } .hub-slider-controls { position:absolute; left:0; top:0; z-index:1000; } .hub-slider-arrow { width:40px; height:40px; border:none; background:#f44336; color:#fff; font-weight:bold; cursor:pointer; } .hub-slider-arrow:focus { outline:none; } .login-form { background:#222430; padding:2.5em; background-size:cover; -webkit-box-shadow:-6px 6px 3px 0px rgb(28,43,61); -moz-box-shadow:-6px 6px 3px 0px rgb(28,43,61); -o-box-shadow:-6px 6px 3px 0px rgb(28,43,61); -ms-box-shadow:-6px 6px 3px 0px rgb(28,43,61); box-shadow:0px 5px 9px 0px rgba(0,0,0,0.68); text-align:left; min-height:675px; } .input-row { padding:1em 1.5em; border:1px solid #c7c7c7; -webkit-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; border-radius:15px; } .login-form h2,.login-form h3 { font-size:2.2em; color:#fff; text-align:center; margin-bottom:1.5em; line-height:0.7em; 'Abril Fatface',cursive; } .login-form input[type="text"],.login-form input[type="email"],.login-form input[type="password"],.login-form textarea,.login-form select { outline:none; font-size:1em; color:#999999; padding:.6em; margin:0; width:93%; border:none; -webkit-appearance:none; display:block; background:#fff; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px; border-radius:2px; } select { width:98% !important; } .login-form p { font-size:1em; color:#fff; margin:1.5em 0 .5em; font-weight:600; } .login-form textarea { min-height:100px; width:95%; } /*-- checkbox --*/.anim { font-size:0.9em; color:#fff; cursor:pointer; position:relative; margin:2em 0 0; font-weight:600; display:inline-block; } input.checkbox { background:#222430; cursor:pointer; vertical-align:middle; } input.checkbox:before { content:""; position:absolute; width:1em; height:1em; background:inherit; } input.checkbox:after { content:""; position:absolute; top:0px; left:0; z-index:1; width:1em; height:1em; border:1px solid #F44336; -webkit-transition:.4s all; -moz-transition:.4s all; -o-transition:.4s all; -ms-transition:.4s all; transition:.4s all; } input.checkbox:checked:after { transform:rotate(-45deg); height:.5rem; border-color:#F44336; border-top-color:transparent; border-right-color:transparent; } @keyframes rippling { 50% { border-left-color:#F44336; } 100% { border-bottom-color:#F44336; border-left-color:#F44336; } }.login-form.login-form-left .anim { margin-top:2.5em; } /*-- //checkbox --*/.login-form input[type="submit"] { font-size:1em; color:#fff; background:#F44336; border:1px solid #F44336; outline:none; cursor:pointer; padding:.6em 1em; -webkit-appearance:none; width:100%; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; border-radius:2px; margin-top:4em; } .login-form input[type="submit"]:hover { background:transparent; color:#F44336; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .login-agileits-bottom { margin-top:3.9em; text-align:center; } .login-agileits-bottom h6 { font-size:1em; font-weight:600; } .login-agileits-bottom h6 a { color:#fff; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .login-agileits-bottom h6 a:hover { color:#F44336; } .footer-social-grids { margin:3em 0 0 0; text-align:center; } .footer-social-grids p { color:#FFFFFF; font-size:1em; margin:0 0 3em 0; } .social-grid { text-align:center; display:inline-block; } .social-grid:nth-child(2) { margin:0 .5em; } .social-grid a i.fa.fa-facebook,.social-grid a i.fa.fa-twitter,.social-grid a i.fa.fa-rss { height:30px; width:30px; border:solid 2px #ffffff; line-height:31px; background:none; color:#ffffff; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .social-grid a i.fa.fa-facebook:hover { border:solid 2px #3b5998; background:#3b5998; color:#FFFFFF; } .social-grid a i.fa.fa-twitter:hover { border:solid 2px #55acee; background:#55acee; color:#FFFFFF; } .social-grid a i.fa.fa-rss:hover { border:solid 2px #f26522; background:#f26522; color:#FFFFFF; } .copyright { text-align:center; margin:3em 0 0 0; } .copyright p { color:#ffffff; font-size:1em; margin:0; } .copyright p a { color:#FFFFFF; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .copyright p a:hover { color:#222430; } /*-- responsive --*/@media(max-width:480px) { .w3ls-slider { width:400px; } .content h1 { font-size:2.5em; } }@media(max-width:414px) { .w3ls-slider { width:375px; height:725px; } .login-form h2,.login-form h3 { font-size:2em; } .hub-slider-arrow { width:30px; height:30px; } .content h1 { font-size:2em; } .login-form input[type="submit"] { margin-top:2em; } .login-form { min-height:638px; } }@media(max-width:384px) { .content { padding:2em 0; } .w3ls-slider { width:340px; } .copyright { margin:2em 0 0 0; } }@media(max-width:320px) { .content h1 { font-size:1.5em; margin:0 0 3em 0; } .login-form { padding:1.5em; } .w3ls-slider { width:280px; height:585px; } .login-form input[type="text"],.login-form input[type="email"],.login-form input[type="password"],.login-form textarea,.login-form select { padding:.4em; } .login-form p { margin:.5em 0 .5em; } .login-form input[type="submit"] { padding:.4em 1em; margin-top:1em; } .login-form h2,.login-form h3 { margin-bottom:1em; } .login-form { padding:2.5em 1.5em 1.5em 1.5em; } .login-form { min-height:507px; } .login-form h2,.login-form h3 { font-size:1.5em; } }/*-- //responsive --*/ </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hubslider.js"></script> <script type="text/javascript"> $(function () { $('.hub-slider-slides ul').hubSlider({ selector: $('li'), button: { next: $('.hub-slider-arrow_next'), prev: $('..........完整代码请登录后点击上方下载按钮下载查看
网友评论0