动画切换的登录和注册窗口【原创】

页面的head部分，需要引入相应的CSS样式文件，代码如下：

<link type="text/css" rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link type="text/css" rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，其实就是登录和注册的内容放在不同的div容器里面，代码如下：

<div class="materialContainer">
   <div class="box">
      <div class="title">登录</div>
      <div class="input">
         <label for="name">用户名</label>
         <input type="text" name="name" id="name">
         <span class="spin"></span>
      </div>
      <div class="input">
         <label for="pass">密码</label>
         <input type="password" name="pass" id="pass">
         <span class="spin"></span>
      </div>
      <div class="button login">
         <button><span>立即登录</span> <i class="fa fa-check"></i></button>
      </div>
      <a href="" class="pass-forgot">忘记密码？</a>
   </div>
   <div class="overbox">
      <div class="material-button alt-2"><span class="shape"></span></div>
      <div class="title">注册</div>
      <div class="input">
         <label for="regname">用户名</label>
         <input type="text" name="regname" id="regname">
         <span class="spin"></span>
      </div>
      <div class="input">
         <label for="regpass">密码</label>
         <input type="password" name="regpass" id="regpass">
         <span class="spin"></span>
      </div>
      <div class="input">
         <label for="reregpass">确认密码</label>
         <input type="password" name="reregpass" id="reregpass">
         <span class="spin"></span>
      </div>
      <div class="button">
         <button><span>下一步</span></button>
      </div>
   </div>
</div>

页面的底部需要引入jQuery库和一个JS文件，用于动画切换的事件响应和样式更改，代码如下：

<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>