jquery+css带loading加载动画的登录注册表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css带loading加载动画的登录注册表单效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">


    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
        * {
          font-family: 'Open Sans Condensed', sans-serif;
          color: #464646;
          transition: all 1.5s linear;
          overflow: hidden !important;
          box-sizing: border-box;
        }
        
        .container {
          width: 100%;
          height: 100%;
        }
        .container .bg-img {
          position: fixed;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          opacity: 0;
          filter: blur(5px);
          transform: scale(1.5);
        }
        .container .bg-img img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          min-width: 50%;
          min-height: 50%;
        }
        
        .header {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #464646;
          display: table;
          text-align: center;
          color: #e2e8e7;
          z-index: 10;
        }
        .header h1 {
          display: table-cell;
          text-align: center;
          vertical-align: middle;
          font-size: 72px;
          z-index: 2;
          position: relative;
          color: #E2E8E7;
        }
        
        .main {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        .main .login {
          position: absolute;
          background: #fff;
          height: 260px;
          width: 300px;
          bottom: -520px;
          left: 50%;
          margin-left: -150px;
          box-shadow: 0 0 20px 2px #464646;
          z-index: 2;
        }
        .main .register {
          position: absolute;
          background: #fff;
          height: 440px;
          width: 300px;
          bottom: -880px;
          left: 50%;
          margin-left: -150px;
          box-shadow: 0 0 20px 2px #464646;
          z-index: 2;
        }
        
        .form-toggle {
          float: right;
          color: #00B3A0;
          font-size: 14px;
          line-height: 24px;
        }
        
        .form-toggle:hover {
          cursor: pointer;
        }
        
        .footer {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #e2e8e7;
        }
        .footer .footer-nav {
          list-style: none;
          width: 100%;
          height: 20%;
          position: relative;
          margin: 0;
          padding: 0;
          margin-top: 100px;
          text-align: center;
        }
        .footer .footer-nav .link {
          width: 25%;
          float: left;
          border-left: 1px solid #666666;
          border-right: 1px solid #464646;
        }
        .footer .footer-nav .link:first-child {
          border-left-width: 0;
        }
        .footer .footer-nav .link:last-child {
          border-right-width: 0;
        }
        
        .disclaimer {
          font-size: 12px;
          text-align: center;
          width: 80%;
          margin: 12px auto;
          padding: 12px;
        }
        
        .container.loaded .loading {
          display: none;
        }
        .container.loaded .bg-img {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
        .container.loaded .header {
          height: 40px;
          background-color: #00b3a0;
          box-shadow: 0 0 20px 2px #464646;
        }
        .container.loaded .header h1 {
          font-size: 24px;
        }
        .container.loaded .main .login {
          bottom: calc(25% - 50px);
        }
        .container.loaded .footer {
          top: 75%;
        }
        
        .register {
          transition: all .5s linear;
        }
        
        .container.loaded.show-register .login {
          box-shadow: 0 0 0 0 transparent;
        }
        .container.loaded.show-register .register {
          bottom: calc(25% - 50px);
        }
        
        form {
          padding: 12px 24px 24px;
        }
        
        input {
          margin: 12px 0;
          background-color: white;
          background-image: none;
          border: 0px dotted #cccccc;
          border-bottom-width: 2px;
          border-radius: 0;
          box-shadow: 0 0 0 transparent inset;
          color: #cccccc;
          display: block;
          font-size: 1.5em;
          height: 2.0em;
          line-height: 1.5;
          padding: 0 12px;
          transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
          vertical-align: middle;
          width: 100%;
        }
        
        button {
          float: right;
          font-size: 1.5em;
          height: 2.0em;
          line-height: 1.5;
          margin: 12px 0;
          padding: 0;
          background-color: #00b3a0;
          color: #e2e8e7;
          border: 0 none transparent;
          width: 100%;
          text-align: center;
        }
        
        .loading {
          width: 150px;
          height: 150px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -75px;
          margin-left: -75px;
        }
        
        .loading .block {
          width: 40px;
          height: 40px;
          /*border:5px solid #fff;*/
          position: absolute;
        }
        
        .loading .block:nth-child(1) {
          -webkit-animation: top-left 3s infinite;
                  animation: top-left 3s infinite;
          background-color: #00aacf;
        }
        
        .loading .block:nth-child(2) {
          -webkit-animation: top-right 3s infinite;
                  animation: top-right 3s infinite;
          background-color: #f6c574;
        }
        
        .loading .block:nth-child(3) {
          -webkit-animation: bottom-left 3s infinite;
                  animation: bottom-left 3s infinite;
          background-colo.........完整代码请登录后点击上方下载按钮下载查看