CSS3實現(xiàn)動態(tài)背景登錄框的代碼

更新時間：2022年02月24日 09:57:41 作者：拎壺充

本文介紹了一款基于jQuery+CSS3實現(xiàn)的帶有動畫效果的動態(tài)背景登陸框特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于CSS3動態(tài)背景登錄框代碼。這是一款基于jQuery+CSS3實現(xiàn)的帶有動畫效果的動態(tài)背景登陸框特效。效果圖如下：

實現(xiàn)的代碼如下：

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實現(xiàn)的帶有動畫效果的動態(tài)背景登陸框特效，希望大家可以喜歡。

您可能感興趣的文章: