Kod CSS3 untuk melaksanakan kesan box_form log masuk latar belakang dinamik

Berdasarkan kod kotak log masuk latar belakang dinamik CSS3. Ini ialah kotak log masuk latar belakang dinamik kesan khas dengan kesan animasi berdasarkan jQuery CSS3. Paparannya adalah seperti berikut:

Kod yang dilaksanakan adalah seperti berikut:

kod html:

<div class="htmleaf-container">
    <div class="wrapper">
      <div class="container">
        <h1>Welcome</h1>

        <form class="form">
          <input type="text" placeholder="Username">
          <input type="password" placeholder="Password">
          <button type="submit" id="login-button">Login</button>
        </form>
      </div>

      <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script>
    $('#login-button').click(function (event) {
      event.preventDefault();
      $('form').fadeOut(500);
      $('.wrapper').addClass('form-success');
    });
  </script>

Artikel ini memperkenalkan kesan khas kotak log masuk latar belakang dinamik ini dengan kesan animasi berdasarkan jQuery CSS3 saya harap anda akan menyukainya.