Maison > interface Web > js tutoriel > le corps du texte

Code CSS3 pour implémenter les effets box_form de connexion dynamique en arrière-plan

WBOY
Libérer: 2016-05-16 15:48:37
original
1637 Les gens l'ont consulté

Basé sur le code de la boîte de connexion en arrière-plan dynamique CSS3. Il s'agit d'un effet spécial de boîte de connexion en arrière-plan dynamique avec des effets animés basés sur jQuery CSS3. Le rendu est le suivant :

Le code implémenté est le suivant :

code 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>
Copier après la connexion

Cet article présente cet effet spécial de boîte de connexion en arrière-plan dynamique avec des effets animés basés sur jQuery CSS3. J'espère que vous l'aimerez.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal