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 に基づいたアニメーション効果を備えた動的な背景のログイン ボックスの特殊効果を紹介します。気に入っていただければ幸いです。