Rumah > hujung hadapan web > tutorial js > Kod CSS3 untuk melaksanakan kesan box_form log masuk latar belakang dinamik

Kod CSS3 untuk melaksanakan kesan box_form log masuk latar belakang dinamik

WBOY
Lepaskan: 2016-05-16 15:48:37
asal
1673 orang telah melayarinya

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>
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan