炫酷CSS3登录界面jQuery特效

<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />

<script src="assets/js/jquery-1.11.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>

<script src="assets/js/demo.js"></script>

<div class="modal invisible">

  <div class="monster-open-close" style="background-image: url(assets/img/m-open-close.png)"></div>

  <div class="modal-inner" style="background-image: url(assets/img/landscape.png);">

    <p class="close"><span></span></p>

    <div class="modal-body">

      <div class="monster-close" style="background-image: url(assets/img/m-close.png)"><span>Are you sure?</span></div>

      <h2>Stay up-to-date with our campaign</h2>

      <ul>

        <li>Latest news</li>

        <li>Promise no spam!</li>

      </ul>

      <div class="form">

        <div class="form-holder">

          <div class="monster-signup"><span style="background-image: url(assets/img/m-signup.png)"></span></div>

          <div class="form-holder-inner">

            <form>

              <div class="group">

                <input type="text" name="email" id="email" placeholder="Your email" autocomplete="off" required>

              </div>

              <div class="submit">

                <input type="submit" class="submit-btn" value="Sign up" disabled="disabled">

              </div>

            </form>

            <div class="thank-you-holder">

              <span>Thank You, Human!</span>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<section class="trigger">

  <h1>Stay up-to-date with our campaign</h1>

  <button id="button">SIGN UP</button>

</section>