jquery层叠伸缩简洁登录表单页面代码-html代码-BFW代码库

jquery层叠伸缩简洁登录表单页面代码

代码语言：html

代码描述：jquery层叠伸缩简洁登录表单页面代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css">
    <style>
        @import 'https://fonts.googleapis.com/css?family=Open+Sans|Quicksand:400,700';

        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        body,
        html {
          height: 100%;
          font-family: 'Quicksand', sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        
        body {
          background: rgba(30,29,31,1);
        background: -moz-linear-gradient(-45deg, rgba(30,29,31,1) 0%, rgba(223,64,90,1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(30,29,31,1)), color-stop(100%, rgba(223,64,90,1)));
        background: -webkit-linear-gradient(-45deg, rgba(30,29,31,1) 0%, rgba(223,64,90,1) 100%);
        background: -o-linear-gradient(-45deg, rgba(30,29,31,1) 0%, rgba(223,64,90,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(30,29,31,1) 0%, rgba(223,64,90,1) 100%);
        background: linear-gradient(135deg, rgba(30,29,31,1) 0%, rgba(223,64,90,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1d1f', endColorstr='#df405a', GradientType=1 );
        }
        
        /*--------------------
        Text
        ---------------------*/
        
        h2, h3 {
          font-size: 16px;
        	letter-spacing: -1px;
          line-height: 20px;
        }
        
        h2 {
        	color: #747474;
        	text-align: center;
        }
        
        h3 {
        	color: #032942;
        	text-align: right;
        }
        
        /*--------------------
        Icons
        ---------------------*/
        .i {
          width: 20px;
          height: 20px;
        }
        
        .i-login {
          margin: 13px 0px 0px 15px;
          position: relative;
          float: left;
          background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc.........完整代码请登录后点击上方下载按钮下载查看