jquery+css极简登录注册表单页面代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css极简登录注册表单页面代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <style>
        * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    body {
      font-family: "Open Sans", sans-serif;
      background: #e2e2e2;
    }
    
    svg {
      position: fixed;
      top: 10px;
      left: 180px;
    }
    
    .container {
      position: relative;
      top: 200px;
      left: 35%;
      display: block;
      margin-bottom: 80px;
      width: 500px;
      height: 360px;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      z-index: 1;
    }
    
    h2 {
      padding: 40px;
      font-weight: lighter;
      text-transform: uppercase;
      color: #414141;
    }
    
    input {
      display: block;
      height: 50px;
      width: 90%;
      margin: 0 auto;
      border: none;
    }
    input::placeholder {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    input:hover, input:focus, input:active:focus {
      color: #ff5722;
      outline: none;
      border-bottom: 1px solid #ff5722;
    }
    input:hover::placeholder, input:focus::placeholder, input:active:focus::placeholder {
      color: #ff5722;
      position: relative;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    
    .email,
    .pwd {
      position: relative;
      z-index: 1;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 20px;
      font-family: "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #858585;
      font-weight: lighter;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    
    .link {
      text-decoration: none;
      display: inline-block;
      margin: 27px 28%;
      text-transform: uppercase;
      color: #858585;
      font-weight: lighter;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    
    button {
      cursor: pointer;
      display: inline-block;
      float: left;
      width: 250px;
      height: 60px;
      margin-top: -10px;
      border: none;
      font-family: "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #fff;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    button:nth-of-type(1) {
      background: #673ab7;
    }
    button:nth-of-type(2) {
      background: #ff5722;
    }
    button span {
      position: absolute;
      display: block;
      margin: -10px 20%;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    button:hover span {
      -webkit-transform: translateX(30px);
      transform: translateX(30px);
    }
    
    .reg {
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform: translateY(-100%) scale(1);
      transform: translateY(-100%) scale(1);
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50px;
      background: #673ab7;
      z-index: 5;
      -webkit-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
    }
    
    .sig {
      position: absolute;
      top: 0;
      right: 0;
      -webkit-transform: translateY(-100%) scale(1);
      transform: translateY(-100%) scale(1);
      display: block;
      width: 20px;
      height: 20px;
      display: block;
      background: #ff5722;
      z-index: 5;
      -webkit-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
    }
    
    h3 {
      position: absolute;
      top: -100%;
      left: 20%;
      text-transform: uppercase;
      font-weight: bolder;
      color: rgba(255, 255, 255, 0.3);
      -webkit-transition: 0.3s ease-in-out 1.2s;
      transition: 0.3s ease-in-out 1.2s;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="174.7899" y1="186.34" x2="330.1259" y2="186.34" gradientTransform="matrix(0.8538 0.5206 -0.5206 0.8538 147.9521 -79.1468)">
	<stop  offset="0" style="stop-color:#FFC035"/>
	<stop  offset="0.221" style="stop-color:#F9A639"/>
	<stop  offset="1" style=&quo.........完整代码请登录后点击上方下载按钮下载查看