ホームページ > ウェブフロントエンド > jsチュートリアル > 動的バックグラウンドログイン box_form 効果を実装する CSS3 コード

動的バックグラウンドログイン box_form 効果を実装する CSS3 コード

WBOY
リリース: 2016-05-16 15:48:37
オリジナル
1677 人が閲覧しました

CSS3 動的バックグラウンド ログイン ボックス コードに基づいています。これは、jQuery CSS3 に基づいたアニメーション効果を備えた動的な背景のログイン ボックスの特殊効果です。レンダリングは次のとおりです:

実装されたコードは次のとおりです:

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>
ログイン後にコピー

この記事では、jQuery CSS3 に基づいたアニメーション効果を備えた動的な背景のログイン ボックスの特殊効果を紹介します。気に入っていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート